Vue keep-alive 에서$destory()페이지 가 캐 시 되 지 않 는 상황 을 해결 합 니 다.

필요:
프로젝트 에 서 는 브 라 우 저 와 같은 네 비게 이 션 바 를 개발 해 야 합 니 다.닫 히 지 않 았 을 때 페이지 캐 시 를 닫 으 면 페이지 가 삭 제 됩 니 다.(도식

프로젝트 는 Vue+Vue-Router+Vuex 를 사용 합 니 다.
처음에 사용 한 방법 은 네 비게 이 션 탭 을 닫 고 해당 페이지 의$destory()방법 을 직접 호출 하 는 것 입 니 다.OK.페이지 를 닫 는 기능(다음 에 이 페이지 를 열 면 초기 화)을 실현 할 수 있 지만 문제 가 발생 했 습 니 다.
이 페이지 는 더 이상 캐 시 되 지 않 습 니 다.즉,네 비게 이 션 tab 을 전환 할 때 페이지 가 계속 초기 화 됩 니 다!!
문 서 를 찾 아 보 니 도 모 를 찾 았 는데 해결 방법 을 찾 지 못 하고 G 형 에 게 물 어 봤 더 니 Vue keep-alive 에 정말 이런 문제 가 있 었 구나.이것 은링크네가 직접 보 든 지 내 해결 방법 을 보 든 지,헤헤,헛소리 하지 마.방법 을 찾 아 보 든 지,사실은 Vue 문서 에 도 적 혀 있 었 다여기,이곳.
keep-alive 는 두 가지 인 자 를 입력 할 수 있 습 니 다.공식 설명 을 붙 입 니 다.
include 와 exclude 속성 은 구성 요소 가 조건 부 캐 시 를 허용 합 니 다.둘 다 쉼표 로 문자열,정규 표현 식 또는 하나의 배열 로 표시 할 수 있 습 니 다.

< keep-alive include=”a,b”>
< component :is=”view”>
< /keep-alive>
< !C       (   v-bind) C>
< keep-alive :include=”/a|b/”>
< component :is=”view”>
< / keep-alive>
< !C    (   v-bind) C>
< keep-alive :include=”[‘a', ‘b']”>
< component :is=”view”>
< /keep-alive>`

일치 합 니 다.먼저 구성 요소 자체 의 name 옵션 을 검사 합 니 다.name 옵션 을 사용 할 수 없 으 면 부분 등록 이름(부모 구성 요소 components 옵션 의>>키)과 일치 합 니 다.익명 구성 요소 가 일치 하지 않 습 니 다.
keep-alive 는 캐 시 인 스 턴 스 가 없 기 때문에 함수 식 구성 요소 에서 정상적으로 작 동 하지 않 습 니 다.
하마터면 알 아 볼 뻔 했 지?페이지 의 소각 이 반드시$destory()를 호출 해 야 하 는 것 은 아니 야.내 가 생각 을 정리 할 게(include):
우선 vuex 에서 배열 includePageNames 를 정의 합 니 다.이 배열 은 현재 탐색 표시 줄 에 표 시 된 페이지 의 이름 name(각 페이지 의 Vue 파일 에서 name 의 값 을 정의 합 니 다)을 저장 합 니 다.
페이지 가 열 렸 을 때 이 페이지 의 name($commt)을 includePageNames 에 추가 합 니 다.
페이지 가 닫 혔 을 때 includePageNames 에서 해당 페이지 에 해당 하 는 name 을 제거 합 니 다.이 때 이 페이지 액 은 캐 시 에서 삭 제 됩 니 다.이것 은 우리 가 원 하 는 결과 에 이 르 지 않 습 니까?
구체 적 인 코드 는 올 리 지 않 겠 습 니 다.제 가 직면 한 문 제 를 말씀 드 리 겠 습 니 다.keep-alive 는 include PageNames(배열)에 전 달 했 는데 잘못 보 고 했 습 니 다.이 유 는 실제 적 으로 정규 표현 식 이나 쉼표 로 구 분 된 String 이 필요 하기 때 문 입 니 다.어 쩔 수 없 이 include PageNames.toString()을 직접 전달 하면 됩 니 다.
추가 지식:vue 페이지 캐 시 유지 및 캐 시 제거
경로:

routes: [{
    path: '/page1',
    name: page1',
    component: page1',
    meta:{
          keepAlive:true //true     ，false    
         } 
},{
path: '/page2',
    name: page2',
    component: page2',
     meta:{
          keepAlive:true
         }
 
}]

페이지 js:

 /**
  *          ，beforeRouteLeave methods   
  */
  beforeRouteLeave(to, from, next) {  //  （      ，     ，  ）
  if(    ){
     to.meta.keepAlive = false //             
  }else{
    to.meta.keepAlive = true  //             
  }
  next();
 },

이 해결 Vue keep-alive 호출$destory()페이지 가 더 이상 캐 시 되 지 않 는 경 우 는 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.많은 응원 부탁드립니다.