Question

所以我试图创建一个“上一页”/“下一页”类型的导航结构，它使用我的index.js（路由）文件中定义的路由顺序来确定下一个是哪一个。但是，我在确定如何访问Routes数组时遇到了一些困难。 Here's an example of the navigation I'm trying to replicate（具有讽刺意味的是，它位于Vue网站的路线文档中 - 页面底部的两个小＆lt;＆gt;箭头）。

这是我的index.js文件：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/home/Home';
import SearchResults from '@/components/search/SearchResults';
import Vision from '@/components/who-we-are/Vision';

Vue.use(Router);

export default new Router({
  // mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/search-results',
      name: 'SearchResults',
      component: SearchResults,
    },
    {
      path: '/who-we-are/vision',
      name: 'Vision',
      component: Vision,
    },
  ],
});

HTML：

<a @click="foo()">Next</a>

脚本：

import Router from 'vue-router';

export default {
  name: 'home',
  methods: {
    foo() {
      console.log(this.Router.routes[0].path);
    },
  },
};

上面的代码显然不起作用，但那是我离开的地方。

重申一下，基于上面的代码，我试图抓住路径数组并创建一个简单的导航，按照它们列出的顺序（下一个/上一个）移动它们。

伪代码类似于“点击 - 转到路线[0]。路径，增加1”。 “如果再次点击 - 转到路线[1]。路径，增加1。”等（以前相反）。

Answer 1

您可以通过routes从组件中访问您在Router构造函数中指定的this.$router.options.routes数组。

但是，将此对象用于显示和导航目的是执行简单任务的一种循环方式。按照您希望导航到它们的顺序，将路径名称数组添加到组件会更容易：

data() {
  return {
    routeNames: ['Home', 'Search Results', 'Vision'],
  }
}

然后根据当前路线的名称创建一个转到下一条路线的方法：

methods: {
  goToNextRoute() {
    let index = this.routeNames.indexOf(this.$route.name);

    if (this.routeNames[index + 1]) {
      this.$router.push({ name: this.routeNames[index + 1] });
    }
  }
}

如果您真的想要使用在Router中定义的路线，我建议创建一个计算属性来跟踪当前路线的索引。

要查找当前路线的索引，您可以这样做：

computed: {
  routeIndex() {
    let routes = this.$router.options.routes
    let index;
    for (let i = 0; i < routes.length; i++) {
      if (routes[i].name == this.$route.name) {
        index = i;
        break;
      }
    }

    return index;
  }
}

然后，转到数组中的下一个路径：

methods: {
  goToNextRoute() {
    let nextRoute = this.$router.options.routes[this.routeIndex + 1];

    this.$router.push({ name: nextRoute.name });
  }
}

Answer 2

您似乎可以简单地使用vue-router提供的router.go(1)方法。此方法根据您传入方法的金额在历史堆栈中向前或向后移动。例如，要继续1，您可以执行router.go(1)，然后返回1，您可以执行router.go(-1)

Answer 3

我想你应该看看这个例子。

    import Vue from 'vue'
import VueRouter from 'vue-router'

// 1. Use plugin.
// This installs <router-view> and <router-link>,
// and injects $router and $route to all router-enabled child components
Vue.use(VueRouter)

// 2. Define route components
const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 3. Create the router
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

// 4. Create and mount root instance.
// Make sure to inject the router.
// Route components will be rendered inside <router-view>.
new Vue({
  router,
  template: `
    <div id="app">
      <h1>Basic</h1>
      <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/foo">/foo</router-link></li>
        <li><router-link to="/bar">/bar</router-link></li>
        <router-link tag="li" to="/bar" :event="['mousedown', 'touchstart']">
          <a>/bar</a>
        </router-link>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `
}).$mount('#app')

如何直接从组件访问Vue的路由数组？

3 个答案: