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-breadcrumb>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容