0.8.1 • Published 1 year ago
vue-2-breadcrumbs v0.8.1
breadcrumbs
Vue breadcrumbs builds on the official vue-router package to provide simple breadcrumbs. Demo
Support
- 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
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>'
});
0.8.1
1 year ago
0.8.0
3 years ago
0.7.12
3 years ago
0.7.11
3 years ago
0.7.10
4 years ago
0.7.9
4 years ago
0.7.8
4 years ago
0.7.7
4 years ago
0.7.6
4 years ago
0.7.5
4 years ago
0.7.4
4 years ago
0.7.3
4 years ago
0.7.2
4 years ago
0.7.1
4 years ago
0.7.0
4 years ago
0.6.3
4 years ago
0.6.2
4 years ago
0.6.1
4 years ago
0.6.0
4 years ago
0.5.2
4 years ago
0.5.1
5 years ago
0.5.0
5 years ago
0.4.2
5 years ago
0.4.0
6 years ago
0.3.1
6 years ago
0.3.0
6 years ago
0.2.4
6 years ago
0.2.3
6 years ago
0.2.2
6 years ago
0.1.3
6 years ago
0.2.0
6 years ago
0.1.2
7 years ago
0.1.1
7 years ago
0.1.0
7 years ago
0.0.1
7 years ago