vue-breadcrumbs


Vue breadcrumbs builds on the official vue-router package to provide simple breadcrumbs. This package is backwards compatible to support both Vue 1.x and Vue 2.x.

DEMO

Installation

``html

`

`js
Vue.use(VueBreadcrumbs)
`

or via npm:

`sh
$ npm install vue-breadcrumbs
`

`js
import VueBreadcrumbs from 'vue-breadcrumbs'

Vue.use(VueBreadcrumbs)
`

Define the matching breadcrumb text in your routes.

An options object can also be passed into the plugin to specify your own template and rendering methods if desired. For example:

`js
Vue.use(VueBreadcrumbs, {
template: '

'
});
`

By default the plugin will autoregister a breadcrumbs component which is globally accessible in your app (thanks to HermannBjorgvin. To disable this functionality you can set the registerComponent option to false when registering the component, like so:

`js
Vue.use(VueBreadcrumbs, {
registerComponent: false
});
`

Note: if referencing directly in the browser rather than as a module, there is no way to stop the default component from registering.

Usage

$3

Use the breadcrumb: property of a route or subRoute, e.g.:

`js
router.map({
'/': {
component: Page,
breadcrumb: 'Home Page',
subRoutes: {
'/foo': {
component: Foo,
breadcrumb: 'Foo Page'
},
'/bar': {
component: Bar,
breadcrumb: 'Bar Page'
}
}
}
})
`



$3

Use the meta.breadcrumb: property of a route or child route, e.g.:

`js
new VueRouter({
routes: [
{
path: '/',
component: Page,
meta: {
breadcrumb: 'Home Page',
},
children: [
{
path: '/foo',
component: Foo,
meta: {
breadcrumb: 'Foo Page'
}
},
{
path: '/bar',
component: Bar,
meta: {
breadcrumb: 'Bar Page'
}
}
]
}
]
})
`

You can then render the breadcrumbs using the included component or using your own markup logic with the global this.$breadcrumbs` property which will return an array of active matched routes.

License

MIT