Best breadcrumb pattern


#1

I have an App component with a header / breadcrumb and router-view.

It uses vue-router to move from one “component” to another component.

What’s the best pattern to have a dynamic breadcrumb? Like displaying the user name when on a profile page.

Thnx in advance for your help.


#2

I would suggest dealing with this using vuex-router-sync and building up the breadcrumb trail from the router state. Depending on your URLs, you could probably just turn the path of each URL segment into a human-friendly string, e.g. /users/alberto would become Users > Alberto.

If you need the ability to specify a breadcrumb label/title per route, you might be able to do that with a custom breadcrumb state in the vuex store.

If you need each breadcrumb to link to its respective route, you might be able to do that using the router history and current path. Not sure how that would be done in practice though, it’s just an idea.


#3

$route.matched gives you an array of the route definition ojects matched for the path:


// given these route definitions:

var routes = [
  {
    path: '/users', // [1]
    name: 'users',
    meta: { linkText: "Users"}
    children: [
      {
        path: 'latest',  // [2]
        name: 'users_latest',
        meta: { linkText: "Latest" }
      },
      // ...
    ]
  },
  // ...
]

//  if the path is '/users/latest', then $routes.matched will look like this:
// [ [2], [1] ]
// so the nested routes read from right to left, for breadcrumbs you need it the other way around.
<ul>
  <li v-for="route in $route.matched.slice().matched()">
    <router-link :to="{name: route.name}">
      {{ route.meta.linkText }}
    </router-link>
  </li>
</ul>

#4

I actually think the order in matched is reversed. updated the example above accordingly.


#5

The meta.linkText works very well with static link text

The problem comes from component-based fetched data.

Like:

/users/1/product/173/delete -> Home / Users / John Doe / Products / Ferrari

John Doe / Ferrari are dynamic and come from DB, and I should be able to click on John Doe and get to /users/1


#6

I see, that is indeed a tricky question. I’ll think about it later when I have some time and will get back to you.

I think without a global store like vuex, it will be next to impossible / extremely ugly.


#7

Right now I’m using a vuex + push / pop, but from in-components created.

But its a bit messy, deleting “children routes” when I navigate to a “parent” route, etc…

I’m thinking on working on a “real solution” and release it.

So ideas are welcome :slight_smile:

I’m sure it’s a common pattern, and a reusable solution would be great.


#8

This question really interested me, so I started playing in JSFiddle and came up with this:

https://jsfiddle.net/Linusborg/fgporeLx/

Let me know if you have any questions.


#9

Hello everybody,

I’m digging up an old thread here, but semt to me the right one to post my question.

I already implemented @LinusBorg ‘s JSFiddle (a bit thanks btw), now I need the parent component content (in this case the users list) to disapear when current route is a nested route. I tried to check if there is a way to detect if router view is empty but I couldn’t find anything about that (appart from testing each nested routes’ names’ which I find a but ugly).

Do you think I can still use this breadcrumb approach, or should I switch to something else ?