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

因此,我尝试创建一种“上一页” /“下一页”类型的导航结构,该结构使用在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.”等等.

解决方法:

您可以通过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] });
    }
  }
}

如果您确实要使用在路由器中定义的路由,则建议创建一个计算属性以跟踪当前路由的索引.

要查找当前路线的索引,可以执行以下操作：

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 });
  }
}

标签：vue-router,vue-js,javascript
来源： https://codeday.me/bug/20191026/1933156.html