get all routes in a vue router

Jimmy Obonyo Abor picture Jimmy Obonyo Abor · Mar 21, 2016 · Viewed 32.3k times · Source

Am trying to create a simple menu using vue router , id like to iterate all routes and display in my menu , currently am using below instance method in my component but i just get a function , how would i iterate to get individual routes ?

methods : {
 getMenuLinks: function() {

        var t = this.$router.map() ;
        //t returns a vue object instance
        return t._children ;
        // did not know how to iterate this 
   }

 }

I want to iterate all maped routes to get something like below of each mapped route :

<a v-link="{ path: 'home' }">Home</a>

Answer

Richard Ayotte picture Richard Ayotte · Jun 10, 2017

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: []
        }
    }
}