Discussion on: Vue Router Architecture and Nested Routes

[James Whiteman]

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

[Bernhard Wittmann]

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. 👍🏻