element UI面包屑 breadcrumb

路由页面

菜单页面

//html
<el-breadcrumb separator=">">
   <span class="crumbBox"></span>
   <el-breadcrumb-item v-for="item in breadCrumbData" :key="item.path">
     <router-link :to="item.path">{{item.title}}</router-link>
     </el-breadcrumb-item>
 </el-breadcrumb>




//方法
<script>
  export default {
    data() {
      return {
        breadCrumbData:[],//面包屑
      };
    },
    methods: {
      getBreadcrumb() {//获取面包屑
          var list=this.$route.fullPath.split('/');
          for(var i in list){
            if(list[i].indexOf('?')>0){
              list[i]=list[i].split('?')[0];
            }
          }
          this.breadCrumbData=[];
          function fn(obj,arr,index,self){
            if(obj.hasOwnProperty('children')&&obj['children'].length>0){
              for(let one of obj.children){
                if(one.name!='park' && one.name==arr[index]){
                  self.breadCrumbData.push({title:one.meta.title,path:list.slice(0,index+1).join('/')})
                  return one.hasOwnProperty('children')&&one['children'].length>0?fn(one,arr,index+1,self):false
                }
              }
            }
          }
          for(var i in list){
            for(var j in this.$store.getters.routers){
              if(this.$store.getters.routers[j].children.length>0){
                for(let one of this.$store.getters.routers[j].children){
                  if(one.hasOwnProperty('name')&& one.name==list[i]){
                    this.breadCrumbData.push({'title':one.meta.title,'path':'/park/'+one.path});
                    fn(one,list,2,this)
                    break;
                  }
                }
              }
            }
          }
      }
    },
    watch:{
        $route(to,from) {
          this.path=to.path;
          this.getBreadcrumb()
        },
    },
    created(){
        this.getBreadcrumb();
    }
 }
    </script>