element-ui 根据菜单数据生成当前路由的面包屑

菜单数据

menuList: [
    {
      id: "XXXXysis",
      name: "XXXXysis",
      title: "XXX分析",
      isShow: true,
    },
    {
      id: "threatXXX",
      name: "threatXXX",
      title: "XXX分析",
      isShow: true,
      children: [
         {
            id: "XXXXRule",
            name: "XXXXRule",
            title: "XXX规则",
            isShow: true,
          },
         ],
       },
       {
         id: "xxxxModel",
         name: "xxxxModel",
         title: "XXXX模型",
         isShow: true,
              children: [
                {
                   id: "modelxxxx",
                   name: "modelxxxx",
                   title: "模型xxxx",
                   isShow: true,
                   children: [
                     {
                        id: "createxxxx",
                        name: "createxxxx",
                        title: "创建xxxx",
                        isShow: false,
                    }
                  ]
                },
           ],
     }
]

实现面包屑

<el-menu mode="horizontal" :default-active="$store.state.sidebarMenuActiveName" :unique-opened="true" :collapse-transition="false" menu-trigger="hover"
  text-color="#B3B3B3" active-text-color="#f2f4f4" background-color="#302833" @select="selectMenu">

在需要的页面

<el-breadcrumb class="ui-breadcrumb f-l">

　　<el-breadcrumb-item v-for="item in breadCrumbLists" :key="item.id">

　　{{ item.title }}

　　</el-breadcrumb-item>

</el-breadcrumb>

  methods:{
      selectMenu(index, path){
         let tab = typeof index == 'string' ? index : index[0];
           // /** 设置面包屑 */
         this.breadCrumbLists= [];
         this.breadCrumbLists = this.loopSetBredcrumb(tab,this.$store.state.sidebarMenuList);
      },
　　   /**
       * index - 选中菜单项的 index 必填
       * menuData - 菜单数据 必填
       */
     loopSetBredcrumb(index,menuData,lists,z){
        lists= lists || [];
        z = z||0;
        for(var i=0,len=menuData.length;i<len;i++){
           let item = menuData[i];
           lists[z] = item;
           if(item.id === index) return lists.slice(0,z+1);
           if(item.children&&item.children.length){
             let res = this.loopSetBredcrumb(index,item.children,lists,z+1);
             if(res) return res;
           };
       };
    };
 }