vue-element-admin的面包屑导航优化方案

说明

在使用vue-element-admin时对于其中的面包屑导航有丢丢不满意。
如图：

我更希望的如下：
Dashboard>List
Dashboard>List>Detail

解决思路一

通过在router中添加children来实现。这样面包屑导航完美复合我的要求。但是因为Vue Router嵌套规则，此条路肯定走不通，同时vue element admin在这样显示菜单时也有问题。

解决思路二

在router的meta中添加parent属性（eg：parent:{name:’route.name’}）。修改vue element admin的面包屑组件代码getBreadcrumb方法。
原始

getBreadcrumb() {
    // only show routes with meta.title
    let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
    const first = matched[0]
    if (!this.isDashboard(first)) {
        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
      }
    this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
}

修改为：

getBreadcrumb() {
    // only show routes with meta.title
    let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
    const first = matched[0]
    if (!this.isDashboard(first)) {
        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].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)
}

至此，基本满足我的需求