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

Question

所以我试图创建一个"上一页"/"下一页"类型的导航结构,它使用我的index.js(routes)文件中定义的路由顺序来确定下一个是哪一个.但是,我在确定如何访问Routes数组时遇到了一些困难. 这是我试图复制的导航示例(具有讽刺意味的是,它位于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);
    },
  },
};

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

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

伪代码类似于"点击 - 转到路由[0] .path,递增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 });
  }
}