vue 프로젝트 참조 vue - element - admin 오픈 소스 프로젝트 3 단계 경로 (메뉴) 캐 시 할 수 없습니다.

프로젝트 프레임 워 크 는 vue - element - admin 오픈 소스 항목 을 참고 하고 왼쪽 메뉴 는 경로 설정 을 읽 습 니 다.
참여 하 는 항목 은 보통 2 급 메뉴 이기 때문에 keep - alive 로 페이지 캐 시 를 할 때 구성 요소 name 을 정확하게 설정 하면 캐 시 를 할 수 있 습 니 다. 그러나 최근 의 한 항목 은 3 급 메뉴 가 있 습 니 다. 전환 을 클릭 할 때 페이지 를 캐 시 할 수 없습니다. csdn 은 블 로 그 를 잘 설명 하고 있 습 니 다. 본 고 는 간단 한 기능 만 실현 할 수 있 습 니 다.
블 로그 주소:https://blog.csdn.net/sinat_31243877/article/details/100183468
중점 을 두 고 해결 하 는 중심 사상 은 메뉴 가 설 정 된 경로 로 등급 을 나 누고 경로 가 생 성 되 기 전에 3 급 경로 의 구성 요 소 를 2 급 경로 에 넣 는 것 이다.

{
    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