Using vue-router to easily create a dynamic breadcrumb - example

[tassioFront]

What problem does this feature solve?

Hi, everyone!

First of all, thanks a lot for have created this awesome router manager! I love it!

Actually, it's not a feature itself (sorry, I looked to create it as a discussion, for example), I think it can be considered an example that how to create a dynamic breadcrumb using vue-router.

So, I have looking for some nice approaches to create dynamic breadcrumb with vue-router, and as I didn't find one that pleased me, I decided to create one. After sharing with other FrontEnds and take good feedbacks, I thought it would be nice to share it here. If you guys agree with I can open a pull request.

Here you can find the repo with README explain the idea: https://github.com/open-ish/vue2-template/tree/feat/add-breadcrumb

What does the proposed API look like?

NA

[forna91]

I did a simply thing without any meta data, but works only with children elements:

<template>

<div class="bg-blue-800 p-4">

        <span v-for="(matched, idx) in this.$route.matched"
        :key="idx">
        <a 
        :href="matched.path">
        {{ matched.name }}
        </a>
        <span v-if="idx != Object.keys(this.$route.matched).length - 1"> / </span>
        </span>

  </div>      
</template>

[tassioFront]

Thanks for sharing, @forna91 ! 😁

I think it will only work well in undynamic routes, but not the same for dynamic ones (using :params). You can make a fork or my project and try it, you'll see the difference.

[isaasci]

Thankyou @forna91 its works very well

[ramusarithak]

Thankyou @forna91 it's worked well and you saved my time

[posva]

Thanks a lot for sharing! If anybody has a Vue 3 version to share, make sure to add it to https://github.com/vuejs/router/discussions!