使用vue-router实现简单的面包屑功能

面包屑 (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.

Vue面包屑建立在官方Vue-Router软件包的基础上，提供简单的面包屑。 该软件包向后兼容，以支持Vue 1.x和Vue2.x。

现场演示 (Live Demo)

https://samturrell.github.io/vue-breadcrumbs/example

https://samturrell.github.io/vue-breadcrumbs/example

安装 (Installation)

Vue.use(VueBreadcrumbs)

or via npm:

或通过npm：

$ npm install vue-breadcrumbs

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:

如果需要，还可以将options对象传递到插件中以指定您自己的模板和渲染方法。 例如：

Vue.use(VueBreadcrumbs, {
  template: '
 ' +
    '{
     { crumb | crumbText }} ' +
    '
'
});

用法 (Usage)

Vue 1.x (Vue 1.x)

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

使用路径或子breadcrumb:属性，例如：

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

Vue 2.x (Vue 2.x)

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

使用路由或子路由的meta.breadcrumb:属性，例如：

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'
          }
        }
      ]
    }
  ]
})

翻译自: https://vuejsexamples.com/implements-simple-breadcrumb-functionality-with-vue-router/