Vue Router Architecture and Nested Routes

Bernhard Wittmann on March 21, 2019

Working with nested routes can be quite a hassle... Therefore I did come up with a conclusion on how to keep the routing configuration clean a... [Read Full]
markdown guide
 

I found I had to add a bit more, because you can't have name github.com/vuejs/vue-router/issues...
Things like breadcrumbs won't work hence I adding something like meta.label to your route enabled me to filter and add breadcrumbs

this.$route.matched.filter((route) => route.name || route.meta.label).map( (route) => {
   let name = route.name
   if(route.meta.label){
      name = route.meta.label
   }
   let items = {
     'text': name,
   }
   return items
})

Naming the label the same as the default child allow a breadcrumb in the place of the empty component

 

Good point. I think it's a good idea to use meta.label for a Breadcrumb navigation anyway, since the translation keys mostly have a different convention than route names and therefore probably are different. 👍🏻

code of conduct - report abuse