BreadCrumbs test

安装

$ npm install breadcrumbstest --save

使用方法

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import breadcrumbs from 'breadcrumbs'

Vue.use(VueRouter)
Vue.use(breadcrumbs)

const home = {template: '<div><router-view/></div>'}
const _id = {template: '<div><h2>自定义ID</h2></div>'}
const Index = {template: '<div><h2>网站首页</h2></div>'}
const About = {template: '<div><h2>网站相关</h2></div>'}
const News = {template: '<div><h2>新闻资讯</h2></div>'}

const router = new VueRouter({
  routes: [
    {path: '/'},
    {
      path: '/home',
      component: home,
      meta: {
        breadcrumb: '首页'
      },
      children: [
        {
          path: '',
          component: Index
        },
        {
          path: 'about',
          component: About,
          meta: {
            breadcrumb: '关于'
          },
          children: [
            {
              path: 'aaa',
              component: News
            }]
        },
        {
          name: 'News',
          path: 'News',
          component: News
        },
        {
          path: ':id',
          component: _id
        }
      ]
    }
  ]
})

在meta里面设置breadcrumb即可显示面包屑文字(链接在本身的path)