Vue-router: Loop over routes to dynamically create <router-link>
Use v-for on router-link.I've used this.$router.options.routes to get all routes. You can also pass it as prop to jvds-navigation.
This is a small example of you how can do it:
example routes
const routes = [ { path: '/', component: Home, name: 'Home', }, { path: '/about', component: About, name: 'About' },];template
<nav> <router-link v-for="route in routes" :key="route.path" :to="route.path"> {{route.name}} </router-link></nav>script
export default { name: 'Navigation', data() { return { routes: this.$router.options.routes }; } // or use computed // computed: { // routes() { // return this.$router.options.routes; // } // }}