get all routes in a vue router get all routes in a vue router vue.js vue.js

get all routes in a vue router


In Nuxt, the routes are generated automatically so I couldn't do what @zxzak suggested.

Here's what you can do in that case.

<template v-for="item in items">    <b-nav-item :to="item.path">        {{item.name}}    </b-nav-item></template>
export default {    created() {        this.$router.options.routes.forEach(route => {            this.items.push({                name: route.name                , path: route.path            })        })    }    , data() {        return {            items: []        }    }}


You can simply iterate over $router.options.routes in your template:

<nav>  <router-link v-for="route in $router.options.routes" :key="route.path" :to="route.path">{{ route.name }}</router-link></nav>

Maybe add styling for the selected route:

:class="{ active: route.path === $router.currentRoute.path }"

edit: for active class, use https://router.vuejs.org/api/#active-class instead


Instead of relaying on Vue's internals, put routes inside the data of your starting component.

var map = {  '/foo': {    component: Foo  },  '/bar': {    component: Bar  }}var routes = Object.keys(map)var App = Vue.extend({  data: function() {    return {      routes: routes    }  }})router.map(map)router.start(App, '#app')

http://jsfiddle.net/xyu276sa/380/