breadcrumbs
Vue breadcrumbs builds on the official vue-router package to provide simple breadcrumbs. Demo
Support
- Support SSR
- Setting parent route without need to actually nest it in children array
- Customized template
- Dynamic breadcrumbs
- Dynamic parent
- Dynamic label
- Shorthand labeling (
breadcrumb: 'Page Label') - Sub-routing
Install
$ npm install vue-2-breadcrumbs
Note: This project is compatible with node v10+
Usage
import Vue from 'vue';
import VueBreadcrumbs from 'vue-2-breadcrumbs';
import App from './App.vue';
Vue.use(VueBreadcrumbs);
Note: After that
<Breadcrumbs/>component would be at your disposal.
Meta in router
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: { template: '<h2>Home</h2>' },
meta: {
breadcrumb: 'Home'
}
},
{
path: '/params',
name: 'Params',
component: { template: '<h2>Params</h2>' },
meta: {
breadcrumb: routeParams => `route params id: ${routeParams.id}`
}
},
{
path: '/context',
name: 'Context',
component: { template: '<h2>Context</h2>' },
meta: {
breadcrumb() {
const { name } = this.$route;
return `name "${name}" of context route`;
}
}
},
{
path: '/parent',
component: { template: '<router-view/>' },
meta: {
breadcrumb: {
label: 'Parent to Params',
parent: 'Params'
}
},
{
name: 'dynamic-parent',
path: '/dynamic-parent',
component: { template: '<h2>Dynamic Parent</h2>' },
meta: {
breadcrumb() {
const { name } = this.$route;
return {
label: name,
parent: 'settings'
};
}
}
}
]
});
Options
An options object can also be passed into the plugin to specify your own template and rendering methods if desired. For example:
import Vue from 'vue';
import VueBreadcrumbs from 'vue-2-breadcrumbs';
Vue.use(VueBreadcrumbs, {
template:
' <nav v-if="$breadcrumbs.length" aria-label="breadcrumb">\n' +
' <ol 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' +
' </ol>\n' +
' </nav>'
});
![[fix]: documentation clarification: named routes](https://avatars.githubusercontent.com/u/40656177?v=4)
![[feat]: Pass additional params into breadcrumb function](https://avatars.githubusercontent.com/u/15677155?v=4)
36 Jun 14, 2022
583 Jan 9, 2023
63 Sep 12, 2022
26 Apr 14, 2022
2 Jun 3, 2021
63 Jan 8, 2023
96 Dec 14, 2022
0 Apr 20, 2018
13.4k Jan 1, 2023
15.2k Jan 4, 2023
51 Jun 20, 2021
25 Dec 2, 2022
72 Mar 24, 2021
70 Jan 2, 2023
540 Jan 5, 2023
24 Apr 27, 2022
56 Dec 25, 2022
2.1k Jan 1, 2023
113 Dec 26, 2022