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

Question

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

路由层级关系如下：

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

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

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 你看下这篇博客吧, 应该有用👉 ：每个前端工程师都应该懂的前端性能优化总结：

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 以帮助更多的人 ^-^