Skip to content

Instantly share code, notes, and snippets.

@austriker27
Created April 18, 2019 16:45
Show Gist options
  • Save austriker27/bd6f672165083ba2526377c4febe9c42 to your computer and use it in GitHub Desktop.
Save austriker27/bd6f672165083ba2526377c4febe9c42 to your computer and use it in GitHub Desktop.
Vue Router Loop - Loop over your router to create a nav bar (or other component) dynamically
<div
v-for="route in routes"
:key="route.path"
class="col flex items-center justify-between p-6"
>
<router-link
class=""
:to="route"
exact-active-class="font-bold"
exact
>
{{ route.name }}
</router-link>
</div>
<script>
export default {
name: 'DynamicallyRenderedNavBar',
computed: {
routes: function() {
let routes = [];
for (let i in this.$router.options.routes) {
if (!this.$router.options.routes.hasOwnProperty(i)) {
continue;
}
let route = this.$router.options.routes[i];
if (route.hasOwnProperty('name')) {
routes.push(route);
}
}
return routes;
},
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment