vue+element管理后台的面包屑

index.js里面这样写 

 显示的组件中写

<!-- 面包屑 -->
        <div class="breadTop">
          <i class="el-icon-location-outline"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block">
            <el-breadcrumb-item><a href="javascript:;">校园管理</a></el-breadcrumb-item>   
            <el-breadcrumb-item v-for="(item)  in levelList" :key="item.path" v-if="item.meta.title" :to="item.redirect||item.path">
              {{item.meta.title}}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>

data中写 

data(){
    return {
        levelList: null,//面包屑
    }
}

methods中写 

//面包屑
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.meta.title)
      this.levelList = matched;
    },

监听和mounted

  watch: {
    $route(to, from) {
      this.getBreadcrumb()
    }
  },
  mounted(){
    this.getBreadcrumb()
  },

下面这个是因为我加了一个图标。可以忽略 

.breadTop {
  text-align: left;
}

 如果还有隐藏的面包屑，我在网上没找到办法，然后就自己想了个特别笨的办法，

大概原理就是隐藏的面包屑肯定是要从哪个页面跳转过去才会显示的。那我就直接让他跳转过去的时候把当前页面的path和meta.title中的名字带过去。。好像很笨。以后有什么好的办法在想。。

其他的都和上面的组件一样。只有methods中变了一丢丢，还有就是传过来的时候要加上参数

这是上一个显示页面

       this.$router.push({
          path:'要跳转到哪个页面',
          query: {
            paths: this.$route.path,
            paths_name: this.$route.meta.title
          }
        })

这是隐藏的页面。只把这个改了。其他的和上面的一样 

    getBreadcrumb() {
      let path = this.$route.query.paths
      let name = this.$route.query.paths_name
      let matched = this.$route.matched.filter(item => item.meta.title)
      if(matched.length != 2){    
        matched = [{path: path, meta: { title: name }}].concat(matched)        
      }
      this.levelList = matched;
    },