Build breadcrumbs without nested routes (subRoutes)

[adriaanmeuris]

I would like to create a breadcrumb trail without having to use nested routes. It seems that it's not possible.

My application has these pages:

• Homepage
• Product overview
• Add product

The pages don't need any of the nested component structure that VueRouter offers, because they will be rendered in the top-level <router-view> outlet.

However, I would like to have a breadcrumb which shows a path that will help the users to navigate back to the previous page, e.g.: Homepage > Product overview > Add product

I managed to get this kind of breadcrumb when using nested routes (subRoutes) in this example: https://jsfiddle.net/adriaanmeuris/9aur04nv/

However, I'm not able to build such a breadcrumb without making use of nested routes.

Any idea how I can define a breadcrumb path myself (i.e. without using subRoutes)?

[samturrell]

Hi @adriaanmeuris - sorry for the delayed response, I somehow unsubscribed from all repository notifications some time ago.

Unfortunately what you are requesting is not possible with this package, and would need a lot of app-specific logic for when these breadcrumbs would show/hide, which takes it outside of the scope of this project.

I'm sure you've solved the issue by now but if you did manage to find a solution I would be interested to know!

[d21d3q]

@adriaanmeuris Did you manage to make breadcrumb trail?

[adriaanmeuris]

Yes I did without using this plugin. I've set up my routes with a custom property meta:

{
  path: '/product/:_id',
  component: ProductDetail,
  name: 'edit-product',
  meta: {
    name: 'Edit',
    parents: ['products']
  }
}

In your component, you can then create a computed which generates an array of breadcrumbs, and checks if the current route has parents:

function findRoute(name) {
  if (!name) return;
  let routes = self.$router.options.routes;
  var found = null;
  for (var i = 0; i < routes.length; i++) {
    var r = routes[i];
    if (r.name === name) {
      found = r;
      break;
    }
  }
  return found;
}

let crumbs = [];
this.$route.meta.parents.forEach((p) => {
  let parentRoute = findRoute(p);
  crumbs.push({
    routeName: parentRoute.name,
    name: parentRoute.meta ? parentRoute.meta.name || '(No route name)' : '(No route name)'
  });
});

return crumbs;