vue 动态 面包屑

项目中经常会遇到这种面包屑，每个页面都有，都写一遍 显然是比较繁琐的，这边给他动态的封装了一个组件。配合router 实现（vue）

第一步：书写面包屑样式，我这边是用了element的面包屑 这里的class 我重写了下 就是 字体加粗， 点击span来跳转

<el-breadcrumb separator-class="el-icon-arrow-right" class="f18 ml20">
     <el-breadcrumb-item v-for="item,index in routerInfo.breadcrumb"  :key="index">
         <span class="cur"  :class="{'is-link':item.path}" @click="go(item.path)">{{item.title}}</span>
     </el-breadcrumb-item>
 </el-breadcrumb>

第二步：配置路由

{
          path: 'project/project',
          name: '工作台',
          title:"科研项目",
          component:resolve =>require(['./presentation/page/project/project.vue'],resolve),
          meta:{breadcrumb:[{
            title:"科研项目",			//title 是面包屑展示的文字				、
            								///1级目录path可有可无，有的话一定要为空
          }]},
        },

        // 新建项目
        {
          path: 'project/createProject',
          name: '工作台',
          title:"新建项目",
          component:resolve =>require(['./presentation/page/project/createProject.vue'],resolve),
          meta:{breadcrumb:[{
            title:"科研项目",							
            path:-1												、、、///  -1  是history.go()  返回多少页  根据特殊情况 可以-2 -3等
          },{
            title:"新建项目",
            path:""
          }]},
        },

第三步：书写click事件

go(index){
	history.go(index)
}