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>