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

Answer 2

It would seem that you can simply use the router.go(1) method provided by vue-router. This method goes either forward or backward in the history stack based on the amount you pass in to the method. For instance to go forward 1 you can do router.go(1), and to go back 1 you can do router.go(-1)

Answer 3

I guess you should look at this example.

    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')