vue-template-admin 3 급 경로 캐 시 할 수 없 는 솔 루 션

1.왜 3 레벨 은 캐 시 되 지 않 습 니까?
src/layout/AppMain 구성 요소:

keep-alive 의 구성 요 소 는 cachedViews 에 의존 합 니 다.cachedViews 는 store 의 한 상태 입 니 다.cachedViews 의 논 리 는 src/layout/tagView 에 있 습 니 다.

경로 가 변경 되면 addViewTags 를 호출 하고 addViewTag 는 일치 하 는 경로 name 속성 에 따라 캐 시 합 니 다.3 급 경 로 를 사용 할 때 name 을 받 을 때 3 급 경로 의 name 만 받 을 수 있 고 2 급 경로 의 구성 요소 이름 을 잃 어 버 릴 수 있 으 며 keep-alive 는 캐 시 를 하지 않 습 니 다.
이 유 를 알 고 첫 번 째 생각 은 2 급 경로 의 name 도 더 하면 된다 는 것 이다.이것 을 실현 하 는 것 도 간단 합 니 다.matched 속성 만 가 져 오 면 일치 하 는 경로 구성 요 소 를 가 져 올 수 있 습 니 다.cached Views 배열 에 넣 으 면 됩 니 다.그러나 문 제 는 여기 2 급 경로 가 1-1,3 급 경로 가 1-1,1-1-2 라 고 가정 하 는 것 이다.1-1-1 구성 요 소 를 끄 려 고 할 때 1-1 을 삭제 해 야 하 는 지 말 아야 하 는 지,삭제 하면 캐 시 는 순조롭게 효력 을 잃 을 수 있다.그러나 만약 에 1-1-2 를 열 었 다 면 캐 시 경로 가 효력 을 잃 을 것 이다.왜냐하면 그것 은 1-1 에 의존 하기 때문이다.삭제 하지 않 으 면 사 이 드 바 에서 1-1-1 링크 를 열 때 원래 구성 요 소 를 다시 사용 합 니 다.
2.3 급(개념 적)을 2 급(진실)으로 전환시킨다.
여기 서 생각해 보면 1-1-1,1-1-2 는 같은 종류 로 나 뉘 기 때 문 입 니 다.이들 이 실제 공유 하 는 데이터 가 없 으 면 1-1 의 경로 구성 요 소 를 끄 는 것 을 고려 할 수 있 습 니 다.제 가 실천 하 는 프로젝트 는 바로 이 렇 습 니 다.1-1 과 1-1-2 는 같은 2 급 메뉴 에 속 하고 데 이 터 를 공유 하지 않 았 습 니 다.그러나 메뉴 를 만 들 때 는 router 표를 사용 합 니 다.그러면 메뉴 를 만 드 는 것 은 원래 의 것 으로,길 을 만 들 때 는 바 꿉 니 다.
다음은 데모 코드 입 니 다.
바 꿀 경로 에 noCompoent 속성 을 추가 합 니 다.

function delteFakeParent(router,prefix) {
 var newRouter = { ...router }
 if(prefix){
 newRouter.path = prefix + '/' + router.path
 }
 if (!router.children) return newRouter
 var children = []
 if (router.noCompoent) {
 for (let i = 0; i < router.children.length; i++) {
  const item = delteFakeParent(router.children[i], newRouter.path)
  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 = delteFakeParent(router.children[i])
  if (Array.isArray(item)) {
  item.forEach(el => {
   children.push(el)
  })
  }
 }
 newRouter.children = children
 }
 
 return newRouter
}

var backendManageRouter1 = {
 name: 'BackendManage',
 meta: {
 title: '    ',
 icon: 'index-management'
 },
 children: [{
 path: 'user-manage',
 name: 'UserManage',
 noCompoent: true,
 meta: {
  title: '    ',
  icon: 'rule-definition'
 },
 alwaysShow: true,
 children: [{
  path: 'user',
  name: 'User',
  meta: {
  title: '    ',
  icon: 'quality-control'
  },
  noCompoent: true,
  children: [
  {
   path: 'a',
   name: 'ad',
   meta: {
   title: 'ad  ',
   icon: 'quality-control'
   },
  }
  ]
 }, {
  path: 'role',
  name: 'Role',
  meta: {
  title: '    ',
  icon: 'rule-task-monitor'
  }
 }]
 }]
}

delteFake Parent 라 는 함 수 는 router 복사 본 을 만 들 고 children 을 옮 겨 다 니 는 것 입 니 다.이 경로 가 noCompoent:true 로 표시 되면 children 로 바 꾸 고 거 슬러 올 라 가 는 과정 에서 router 가 하나의 배열 이 라면 이 router 가 바 뀌 었 다 는 것 을 의미 합 니 다.이 를 옮 겨 다 니 며 모든 항목 을 router.children 에 넣 습 니 다.이렇게 하면 다른 children 들 과 동급 이 될 수 있다.
이것 을 수정 한 후에 실제 router 와 메뉴 router 를 동시에 노출 시 키 는 것 을 기억 하 십시오.메뉴 의 항목 은 store 의 permission.js 를 읽 는 routers 입 니 다.그러면 여기 set-router 는 한편 으로 는 정말 router 와 메뉴 router 를 처리 하려 면 state 를 추가 해 야 합 니 다.
3.vuex 로 데 이 터 를 저장
위의 방안 도 2 급 경로 구성 요소 에 대해 표시 할 필요 가 없 으 면 1 급 경로 의 children 에 넣 을 수 있 지만 필요 하 다 면 vuex 를 사용 하여 데 이 터 를 저장 하 는 것 이 좋 습 니 다.
vue-template-admin 3 급 경로 캐 시 할 수 없 는 솔 루 션 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue-template-admin 3 급 경로 캐 시 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!