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
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.meta.label).map( (route) => {
   let name =
      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