elementui 关于面包屑高亮显示问题

1. 在组件中插入代码

<el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="item in tags" :key="item.path"  :to="{ path:item.path }" style="item.label"><span :class="{active:item.name===activename}">{{item.label}}</span> </el-breadcrumb-item>
      </el-breadcrumb>

加入span标签，绑定class

style中加入.active 样式

 .active{
              color:#fff;
              border-bottom: 1px solid #4197ff;
        }

2. data 变量区写入

data(){
      return { activename:'home'}
    },

3. watch区加一个路由监听

watch:{
      $route(){
        this.breadcrumbChage();
      }
    }

4. methods区加方方法

methods:{
      breadcrumbChage(){
        let matched  = this.$route.matched.filter(item=>item.name)
        this.activename= matched[0]['name']
      } 
    },

5. 路由改变， 取得到当前路由的name值是否与选中标签中的name是否相等，符合，active 样式加入。

vuejs学习中… 很菜转发保留博客地址www.iooe.cn