前端路由多层级嵌套太深且重复的问题

Question

后台管理系统开发中，页面显示效果如下：

路由层级关系如下：

• a

  • b

    • c
  • d

• e

  • f

    • b

      • c

  • g

    • b

      • c

对应完整的路由配置如下：

const routes = [{
  path: '/',
  component: 'LayoutBase',
  redirect: '/a',
  children: [{
    path: 'a',
    component: 'LayoutBlock',
    icon: 'home',
    title: 'a',
    meta: {
      hideChildren: true
    },
    children: [{
      path: '',
      component: 'a',
      title: 'a'
    }, {
      path: 'b',
      component: 'LayoutBlock',
      title: 'b',
      children: [{
        path: '',
        component: 'b',
        title: 'b'
      }, {
        path: 'c',
        component: 'c',
        title: 'c'
      }]
    }, {
      path: 'd',
      component: 'd',
      title: 'd'
    }]
  }, {
    path: 'e',
    component: 'LayoutBlock',
    icon: 'home',
    title: 'e',
    children: [{
      path: 'f',
      component: 'LayoutBlock',
      title: 'f',
      meta: {
        hideChildren: true
      },
      children: [{
        path: '',
        component: 'f',
        title: 'f'
      }, {
        path: 'b',
        component: 'LayoutBlock',
        title: 'b',
        children: [{
          path: '',
          component: 'b',
          title: 'b'
        }, {
          path: 'c',
          component: 'c',
          title: 'c'
        }]
      }]
    }, {
      path: 'g',
      component: 'LayoutBlock',
      title: 'g',
      meta: {
        hideChildren: true
      },
      children: [{
        path: '',
        component: 'g',
        title: 'g'
      }, {
        path: 'b',
        component: 'LayoutBlock',
        title: 'b',
        children: [{
          path: '',
          component: 'b',
          title: 'b'
        }, {
          path: 'c',
          component: 'c',
          title: 'c'
        }]
      }]
    }]
  }]
}]

可以看到，b 和 c 两个路由是父子关系且要在其他路由里面嵌套，但是在菜单中并不展示出来，访问「/a/b」，面包屑展示为「a / b」，访问「/a/b/c」，面包屑展示为「a / b / c」，点击面包屑上面的路由可以跳转回去。

以上嵌套方式，在业务复杂的场景中，就会存在路由嵌套很深的问题，在动态菜单配置的时候比较麻烦，而且还会添加重复的路由，是否还有其他的方案或者写法可以保证菜单展示、同时又能减少路由的复杂度、同时还能保证面包屑展示正常呢？

Answer 1

尝试过的方案：

1、给每一个路由添加上唯一标识，配置的时候始终只有一个层级，如果存在子路由，那么子路由里面是对路由标识的引用，最后组装时，再通过一个工厂函数转换回嵌套的路由，伪代码如下：

const path1 = 1
const path2 = 2

const routes = [{
  path: '/',
  id: path1,
  children: [path2]
}, {
  path: 'a',
  id: path2
}]

这个方案只是表面上看起来没了嵌套，实际上最终的路由还是嵌套的，而且可读性不高。

2、路由和菜单分离。路由全是一级的，根据菜单的需要进行组装，不在菜单里面展示的路由就作为通用路由，伪代码如下：

// 组件
const routeComponents = {
  a: () => import('@/views/a'),
  b: () => import('@/views/b'),
  c: () => import('@/views/c')
}

// 路由
const routes = [{
  path: '/a',
  component: 'a'
}, {
  path: '/b',
  component: 'b'
}, {
  path: '/c',
  component: 'c'
}]

// 菜单
const menus = [{
  path: '/',
  children: [{
    path: '/a',
    component: 'a'
  }, {
    path: '/c',
    component: 'c'
  }]
}]

这个方案，没有了复杂的路由配置和菜单配置，但是路由的层级关系也弱了，在菜单里面的都是可以确定层级关系的，但是之外的路由，也就没了嵌套关系，面包屑导航展示就会对不上，比如「/a」路由实际上是有一个子路由 b 的，当前这种实现方式，虽然可以跳转到 b，但是想要页面跳转到 b 的同时选中菜单 a 且面包屑展示正常，就需要一种标识来标记嵌套关系，而且通用路由之间相互跳转更是麻烦，嵌套关系更加难以标记。

万能的大佬们，可否指点一二？

Answer 2

router-view 加 key
<router-view :key="$route.name">