elementui面包屑动态生成

image.png

面包屑功能，在我们后台管理当中很场景到功能，下面就是实现方法。

<template>
  <div class="tagswrapper">

<el-breadcrumb separator="/">
      <el-breadcrumb-item
        v-for="(item,index) in breadList"
        :key="index"
        :to="{ path: item.path }"
      >{{item.name}}</el-breadcrumb-item>
    </el-breadcrumb>



    

  </div>
</template>

<script>
export default {
    naem:'tagswrapper',
    data(){
        return{
          breadList:[], // 路由集合
        }
    },
    watch:{ //路由改变的时候监听
          $route() {
            this.getBreadcrumb();
        }
    },
    created(){


  this.getBreadcrumb();

    },
    methods:{
   isHome(route) { //拿到首页
      return route.name === "home";
    },

      getBreadcrumb() {

        let matched = this.$route.matched; //拿到显示的路由路径
        console.log('matched',matched)
        if(!this.isHome(matched[0])){//当前路由等于首页
          matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
        }

           this.breadList = matched;


          
        }
    }    
}
</script> 
<style scoped>

.active{color:red;}
.activefs{color:gray;}
.el-icon-close{}
.tags-view-item{width:100px;height:20px;text-align: center;line-height:20px;}

</style>

image.png