How do I implement breadcrumbs with complete links in vue.js - vue.js

Question

I have managed to implement breadcrumbs in my vue.js application using npm.
But I'd like my breadcrumb to display a link to previous page, with the link to the current page(id included) next to it. Like this:
Home Page > Details page (as clickeble links)
I've tried following the example from this link https://www.npmjs.com/package/vue-2-breadcrumbs]
this is my index.js file
import Vue from 'vue'
import Details from '#/components/Details'
import Router from 'vue-router'
import HomePage from '#/components/HomePage'
import VueBreadcrumbs from 'vue-2-breadcrumbs'
Vue.use(Router)
Vue.use(VueBreadcrumbs,{
template:
' <ul class="breadcrumb">\n' +
' <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">\n' +
' <router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>' +
' </li>\n' +
' </ul>\n'
})
export default new Router({
routes: [
{
path: '/',
component: HomePage,
name: 'HomePage',
meta: {
breadcrumb: 'Home Page',
},
},
{
path: '/Details/:id',
component: Details,
meta:{
breadcrumb: function () {
const {name} = this.$route;
return `${name}`;
}
},
name: 'Details',
props: true
}
]
})
It all compiles, and it does render (but only one link, which is to the current page). Now I'd like to add the history link to my breadcrumb (the home page link). How do I do that?

Answer 1

Ok, so I got some inspiration from all of your comments and this is how I fixed it:
So I added one extra <li> to hold the "home page" and the second <li> for looping over the current page... I also wrapped everything inside a root- so no errors about double root elements would occur.
Vue.use(VueBreadcrumbs,{
template:
' <div v-if="$breadcrumbs.length" aria-label="breadcrumb">\n' +
' <ol class="breadcrumb">\n' +
' <li class="breadcrumb-item">Home</li>' +
' <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">\n' +
' <router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>' +
' </li>\n' +
' </ol>\n' +
' </div>'
})
Thank you everyone for your help!

Answer 2

Add another router-link to your template:
<div id="root">
<router-link :to="/">Home</router-link>
<ul class="breadcrumb">
<li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">
<router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>
</li>
</ul>
</div>
Edit:
Declare your template in this way:
Vue.use(VueBreadcrumbs, {
template: ```
<div id="root">
<router-link :to="/">Home</router-link>
<ul class="breadcrumb">
<li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">
<router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>
</li>
</ul>
</div>
```
})

Answer 3

You can create your own breadcrumb
In file 'index.ts' from router
export let activedRoutes: RouteRecord[] = []
router.beforeEach((to, from, next) => {
activedRoutes = [];
to.matched.forEach((record) => { activedRoutes.push(record) })
next();
});
In route definition
{
path: 'my-path-route',
name: 'MyNameRoute',
component: () => import('./MyComponent/MyComponent.component.vue'),
meta: {
title: 'Title',
icon: 'my-icon',
breadcrumb: { label: 'Label of bradcrumb', routeName: 'MyNameRoute'}
},
}
Create a BreadbrumbComponent
import Vue from 'vue';
import Component from 'vue-class-component';
import { Watch } from 'vue-property-decorator';
import { activedRoutes } from '#/router';
#Component({})
export default class BreadcrumbsComponent extends Vue {
breadcrumbs = []
#Watch('$route')
changeRoute() {
this.breadcrumbs = activedRoutes.map(e => e.meta?.breadcrumb).filter(e => e);
}
created() {
this.changeRoute()
}
}
In html BreadcrumbComponent
<template>
<div class="breadcrumbs" v-if="breadcrumbs.length > 1">
<ul class="v-breadcrumbs">
<template v-for="(item, i) in breadcrumbs">
<li :key="item.label">
<router-link
class="v-breadcrumbs__item"
:to="{ name: item.routeName }"
v-html="item.label"
:class="{ disabled: breadcrumbs.length - 1 == i }"
/>
</li>
<li
v-if="breadcrumbs.length - 1 > i"
class="v-breadcrumbs__divider"
:key="item.label"
>
<v-icon>mdi-chevron-right</v-icon>
</li>
</template>
</ul>
</div>
</template>
In scss of BreadcrumbComponent
.breadcrumbs {
.disabled {
text-decoration: none;
color: rgba(0, 0, 0, 0.38);
cursor: default;
}
}
Now is only use your component where wish
You can use the breadcrumb of vuetify to complement
https://vuetifyjs.com/en/components/breadcrumbs/#large