How does one access Vue's routes array directly from a component?

Question

So I'm attempting to create a "Previous Page" / "Next Page" type of navigation structure, which uses the order that routes are defined in my index.js (routes) file to determine which one is next. However, I'm having some difficulty figuring out how to access the Routes array. Here's an example of the navigation I'm trying to replicate (Ironically it's on the route documentation of Vue's site - the two small < > arrows at the bottom of the page).

Here's my index.js file:

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>

script:

import Router from 'vue-router';

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

The above code, obviously, isn't working, but that's where I've left off.

To reiterate, based on the code above, I am trying to grab the array of routes and create a simple navigation that moves through them in the order they're listed (next/previous).

The pseudo-code would be something like "on click - go to route[0].path, increment by 1." "if clicked again - go to route[ 1].path, increment by 1." etc. (reverse for previous.)

Answer 1

You can access the routes array that you specified in the Router constructor from within a component via this.$router.options.routes.

However, using this object for display and navigation purposes is a round-about way to do a simple task. It would be easier to add an array of the route names to your component in the order you would like to navigate to them:

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

Then create a method to go to the next route based on the name of the current route:

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

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

---

If you really want to use the routes as you defined them in your Router, I'd suggest creating a computed property to keep track of the index of the current route.

To find the index of the current route, you could do this:

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

Then, to go to the next route in the array:

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

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