vue-element-admin面包屑改写成多级

component-Breadcrumb面包屑组件

修改getBreadcrumb() 加了绿色的部分

getBreadcrumb() {
         let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
         const first = matched[0]
         if (!this.isDashboard(first)) {
             matched = [{ path: '/deployment', meta: { title: 'deployment' }}].concat(matched)
         }
        if (matched.length > 1) {
           const insertPosition = matched.length - 1
           let parent = matched[insertPosition].meta.parent
           while (parent) {
             const route = this.$router.resolve(parent).route
             matched.splice(insertPosition, 0, route)
             parent = route.meta.parent
           }
         }
         this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    },

路由的地方

红色标注是必填的。

当前只显示一个大的菜单。里面的自己菜单是不显示的，但是页面跳转到子菜单时面包屑上面也要加上。

{
    path: '/device',
    component: Layout,
    name: 'device',
    meta: { title: 'device', icon: 'list' },
    redirect:'/device/device',
    children: [
      {
        path: 'device',
        component: () => import('@/views/device/index'),
        name: 'device',
        meta: { title: 'device', icon: 'list',breadcrumb: false  }
      },
      {
        path: '/device/detail',
        component: () => import('@/views/device/detail'),
        name: 'devicedetail',
        hidden: true,
        meta: { title: 'devicedetail', icon: 'tab' ,activeMenu:'/device/device'}
      }
    ]
  },