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

Question

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

这是我的 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);
    },
  },
};

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

重申一下，根据上面的代码，我正在尝试获取路线数组并创建一个简单的导航，按照它们列出的顺序（下一个/上一个）在它们之间移动。

伪代码类似于“点击时 - 转到 route[0].path，递增 1”。 “如果再次单击 - 转到 route[1].path，递增 1。”等（与以前相反）。

Answer 1

您可以通过this.$router.options.routes 在组件内访问您在Router 构造函数中指定的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')