vue 面包屑功能利用 vue-router meta属性简单实现

直接贴路由配置文件代码

{
path: ‘/Trafficaccidentddetail’,
name: ‘Trafficaccidentddetail’,
meta: {
title: ‘交通事故详情’,
breadcrumb:[
{
name:‘事件管理’,
path:’/Trafficaccident’
},
{
name:‘交通事故’,
path:’/Trafficaccident’
},
{
name:‘详情’,
path:’/Trafficaccidentddetail’
}
]
},
component: resolve => require([’…/components/page/Trafficaccidentddetail.vue’], resolve) //交通事故详情
},
说明：在这里我们 router 的 meta属性 添加了 自定义的breadcrumb对象，这样做后，在每个需要展示面包屑的组件页面中都可以通过：

  <el-breadcrumb separator="/">
    <el-breadcrumb-item>当前位置:</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: item.path }" v-for="item in this.$router.history.current.meta.breadcrumb">{{item.name}}</el-breadcrumb-item>
  </el-breadcrumb>

这样访问即可！（以上方式是需要将面包屑嵌入每一个文件中，如果需要只使用一个面包屑组件全局使用请看下面）

    methods:{
      fetchDate(data){
        console.log('data',data);
        this.routerData =  data.meta ? data.meta : '';
      }
    },
     watch:{
       "$route": "fetchDate"
     },
    mounted(){
      this.routerData =  this.$route.meta.breadcrumb ? this.$route.meta.breadcrumb : '';
    }

我们在面包屑组件中watch $route 路由变量 可以实时改变面包屑组件的数据，从而实现功能！亲测

最新更新：
在面包屑组件中可以不用watch,可以直接使用计算属性，循环计算属性

  computed:{
    breadcrumb(){
      return  this.$route.meta.breadcrumb;
    }
  },
<el-breadcrumb separator="/">
  <el-breadcrumb-item>当前位置:</el-breadcrumb-item>
  <el-breadcrumb-item :to="{ path: item.path }" v-for="item in breadcrumb">{{item.name}}</el-breadcrumb-item>
</el-b