get all routes in a vue router

Question

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 1

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

Answer 2

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