项目框架参考vue-element-admin开源项目，左侧菜单是读取路由配置

参与的项目一般都是二级菜单，所以当用keep-alive做页面缓存时，只要正确的配置组件name都能做到缓存，但是最近的一个项目有三级菜单，当点击切换的时候页面不能缓存，csdn有一篇博客有做很好的阐述，本文只是简单的功能实现

博客地址：https://blog.csdn.net/sinat_31243877/article/details/100183468

划重点，解决的中心思想就是，菜单用配置好的路由层级，在生成路由实例之前，把三级路由的组件放进二级路由里

{
    path: '/liveSchedules',
    component: Layout,
    name: 'liveSchedules',
    noComponent: true,
    meta: {
      title: '直播运营',
      icon: 'live',
    },
    children: [
      {
        path: '/liveSchedule',
        component: () =>
                    import('@/components/views/live/liveSchedule/liveSchedule'),
        name: 'liveSchedule',
        meta: {
          title: '直播排播表',
          icon: 'iconfont icon-yunchaitiao',
        },
      },
      {
        path: '/sportsProcessMonitoring/:id(\\d+)',
        component: () =>
                    import('@/components/views/live/liveSchedule/sportsProcessMonitoring'),
        name: 'sportsProcessMonitoring',
        meta: {
          title: '赛程信息流程监控',
          icon: 'iconfont icon-yunchaitiao',
        },
        hidden: true
      },
      {
        path: '/secondChannel',
        component: () =>
                    import('@/components/views/live/secondChannel/secondChannel'),
        name: 'secondChannel',
        meta: {
          title: '二级频道',
          icon: 'iconfont icon-yunchaitiao',
        },
      },
      {
        path: '/viewProgramList/:id(\\d+)',
        component: () =>
                    import('@/components/views/live/secondChannel/programList/viewProgramList'),
        name: 'viewProgramList',
        meta: {
          title: '节目单查看',
          icon: 'iconfont icon-yunchaitiao',
        },
        hidden: true
      },
      {
        path: '/programListSubstantiation/:id(\\d+)',
        component: () =>
                    import('@/components/views/live/secondChannel/programList/programListSubstantiation'),
        name: 'programListSubstantiation',
        meta: {
          title: '实体化节目单',
          icon: 'iconfont icon-yunchaitiao',
        },
        hidden: true
      },
      {
        path: '/secondChannelDetail/:id(\\d+)',
        component: () =>
                    import('@/components/views/live/secondChannel/secondChannelDetail'),
        name: 'secondChannelDetail',
        meta: {
          title: '二级频道详情',
          icon: 'iconfont icon-yunchaitiao',
        },
        hidden: true
      },
      {
        path: '/firstChannel',
        component: () =>
                    import('@/components/views/live/firstChannel/index'),
        name: 'firstChannel',
        noComponent: true,
        meta: {
          title: '一级频道',
          icon: 'iconfont icon-yunchaitiao',
        },
        children: [
          {
            path: '/liveBroadcast',
            component: () =>
                            import('@/components/views/live/firstChannel/liveBroadcast/liveBroadcast'),
            name: 'liveBroadcast',
            meta: {
              title: '开路直播',
              icon: 'iconfont icon-yunchaitiao',
            },
          },
          {
            path: '/liveBroadcastDetail/:id(\\d+)',
            component: () =>
                            import('@/components/views/live/firstChannel/liveBroadcast/liveBroadcastDetail'),
            name: 'liveBroadcastDetail',
            meta: {
              title: '开路直播详情',
              icon: 'iconfont icon-yunchaitiao',
            },
            hidden: true
          },
          {
            path: '/liveShow',
            component: () =>
                            import('@/components/views/live/firstChannel/liveShow/liveShow'),
            name: 'liveShow',
            meta: {
              title: 'liveshow直播',
              icon: 'iconfont icon-yunchaitiao',
            },
          },
          {
            path: '/liveShowDetail/:id(\\d+)',
            component: () =>
                            import('@/components/views/live/firstChannel/liveShow/liveShowDetail'),
            name: 'liveShowDetail',
            meta: {
              title: 'liveshow详情',
              icon: 'iconfont icon-yunchaitiao',
            },
            hidden: true
          },
        ],
      },
      {
        path: '/liveProcessMonitor',
        component: () =>
                    import('@/components/views/live/processMonitor/liveProcessMonitor'),
        name: 'liveProcessMonitor',
        meta: {
          title: '流程监控',
          icon: 'iconfont icon-yunchaitiao',
        },
      },
    ],
  }
function deleteFakeParent(router) {
  var newRouter = { ...router };
  if (!router.children) return newRouter;
  var children = [];
  if (router.noComponent) {
    for (let i = 0; i < router.children.length; i++) {
      const item = deleteFakeParent(router.children[i]);
      if (Array.isArray(item)) {
        item.forEach(el => {
          children.push(el)
        })
      }else{
        children.push(item)
      }
    }
    newRouter = children
  } else {
    for (let i = 0; i < router.children.length; i++) {
      const item = deleteFakeParent(router.children[i]);
      if (Array.isArray(item)) {
        item.forEach(el => {
          children.push(el)
        })
      }
    }
    newRouter.children = children
  }

  return newRouter
}
let backRouters = [].concat(JSON.parse(JSON.stringify(constantRoutes)));
export {backRouters};
const route = deleteFakeParent(constantRoutes[4]); // noComponent为过滤参数
constantRoutes[4].children = [...route];  // 4为需要处理的路由下标