Vue breadcrumbs builds on the official vue-router package to provide simple breadcrumbs. Demo
- Support Nuxjs (example)
- 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
$ npm install vue-2-breadcrumbsNote: This project is compatible with node v10+
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.
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' }; } } } ] });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>' });