element UI面包屑 breadcrumb

柔情只为你懂 2023-05-21 07:07 13阅读 0赞

路由页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1MTAz_size_16_color_FFFFFF_t_70]

菜单页面

//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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg1MTAz_size_16_color_FFFFFF_t_70]: /images/20230521/887e614f2cea43d2b714484e530fd7e0.png