diff --git a/readme.md b/readme.md index 6b8f383..43cb758 100644 --- a/readme.md +++ b/readme.md @@ -5,6 +5,15 @@ [![npm downloads](https://img.shields.io/npm/dm/vue-2-breadcrumbs.svg?style=flat-square)](https://www.npmjs.com/package/vue-2-breadcrumbs)[![npm](https://img.shields.io/npm/dt/vue-2-breadcrumbs.svg?style=flat-square)](https://www.npmjs.com/package/vue-2-breadcrumbs) +## Support +- Setting parent route without need to actually nest it in children array +- Customized template +- Dynamic breadcrumbs +- Dynamic label +- Shorthand labeling (`breadcrumb: 'Page Label'`) +- Sub-routing + + ## Install ```bash @@ -75,6 +84,16 @@ const router = new VueRouter({ return `name "${name}" of context route`; } } + }, + { + path: '/parent', + component: { template: '' }, + meta: { + breadcrumb: { + label: 'Parent to Params', + parent: 'Params' + } + }, } ] }); diff --git a/src/docs/src/App.vue b/src/docs/src/App.vue index 2e1036f..7287f32 100644 --- a/src/docs/src/App.vue +++ b/src/docs/src/App.vue @@ -24,6 +24,11 @@ +
@@ -59,12 +64,12 @@ li {text-align: left;} color: #2c3e50; content: '/'; } -.breadcrumb-item .active { +.breadcrumb-item a { font-weight: bold; color: #2c3e50; text-decoration: none; } -.router-link-exact-active.active { +.breadcrumb-item span { color: #42b983; } main { diff --git a/src/docs/src/router/index.ts b/src/docs/src/router/index.ts index d102663..790b7ab 100644 --- a/src/docs/src/router/index.ts +++ b/src/docs/src/router/index.ts @@ -106,6 +106,16 @@ const routes: Array = [ ] } ] + }, + { + path: '/parent', + component: { template: '' }, + meta: { + breadcrumb: { + label: 'Parent to settings', + parent: 'settings' + } + }, } ]