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.
Installation
Vue
or via npm:
$ npm install vue-breadcrumbs
Vue
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:
Vue;
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:
Vue;
Note: if referencing directly in the browser rather than as a module, there is no way to stop the default component from registering.
Usage
Vue 1.x
Use the breadcrumb:
property of a route or subRoute, e.g.:
router
Vue 2.x
Use the meta.breadcrumb:
property of a route or child route, e.g.:
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 <breadcrumbs>
component or using your own markup logic with the global this.$breadcrumbs
property which will return an array of active matched routes.