vue 단일 페이지 반환 페이지 keeplive 캐 시 문제 해결

장면:프로젝트 에서 vue 를 만 나 A 페이지 에서 B 페이지 로 되 돌아 갑 니 다.캐 시 A 페이지 입 니 다.B 페이지 상태 가 수정 되 어 다시 A 로 돌아 갈 때 A 페이지 조회 조건 캐 시가 새로 고침 되 지 않 고 목록 이 새로 고침 됩 니 다.
A 쪽:

B 쪽:

해결 방법:
keep-alive 캐 시 를 이용 하여 캐 시가 필요 한 페이지
1.app.vue 에 router-view 를 바 꿉 니 다.

<template>
 <div id="app">
   <keep-alive>
    <router-view v-if="$route.meta.keepAlive">
      <!--             ，   page1,page2 -->
    </router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive">
    <!--             ，   page3 -->
  </router-view>
 </div>
</template>

2.router/index.js 에 루트 정보 추가,캐 시가 필요 한 페이지 설정
keepAlive:캐 시 필요 한 페이지 설정
isBack:beforerRouteEnter 라 는 갈고리 함수 의 from 매개 변 수 를 통 해 어느 페이지 에서 왔 는 지 판단 합 니 다.이 매개 변 수 는 실 행 될 때 구성 요소 인 스 턴 스 가 생 성 되 지 않 았 기 때문에 data 에서 변 수 를 정의 할 수 없습니다.그래서 우 리 는 경로 에서 변 수 를 isBack 로 정의 하여 판단 할 수 있 습 니 다.

{
  path: '/trade',
  name: 'trade',
  component: () => import( /* webpackChunkName: "about" */ '@/views/trade.vue'),
  meta: {
   title:'trade.tradeTitle',
   keepAlive: true, //         
   isBack:false, //            
  }
 },
 {
  path: '/detail/:id',
  name: 'detail',
  component: () => import( /* webpackChunkName: "about" */ '@/views/detail.vue'),
  meta: {
   title:'trade.detailTitle',
   keepAlive: false,
   isBack:false,//            
  }
 },

갈고리 함수 의 실행 순서:
keep-alive 사용 안 함
beforeRouteEnter --> created --> mounted --> destroyed
keep-alive 사용 하기
beforeRouteEnter --> created --> mounted --> activated --> deactivated
캐 시 페이지 에 다시 들 어가 면 beforeRoute Enter-->activated-->deactivated 만 실 행 됩 니 다.created 와 mounted 는 더 이상 실행 되 지 않 습 니 다.우 리 는 서로 다른 갈고리 함 수 를 이용 하여 다른 일 을 할 수 있다.상기 갈고리 함수 의 집행 시기 와 집행 순 서 를 이해 해 야 한다.본 튜 토리 얼 의 핵심 은 이 갈고리 함수 에 의존한다.
activated 와 deactivated 는 keep-alive 를 사용 한 후 vue 에서 비교적 중요 한 두 개의 갈고리 함수 입 니 다.자세히 알 아 보 는 것 을 권장 합 니 다.
A 페이지 에서 beforerRoute Enter 라 는 갈고리 함수 에서 어느 페이지 에서 왔 는 지 판단 합 니 다.

 beforeRouteLeave(to, from, next) {
 //       ，            `this`，     data     （  vm  ）
   //    https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
   //   ，         meta      ，         。       meta   isBack
   //    https://router.vuejs.org/zh-cn/advanced/meta.html
  if (from.path === '/detail'){
   //           ，
    //   B   detail     ，                ，            
   to.meta.isBack = true;
  }else{
   to.meta.isBack = false;
  }
  next();
 },

data 에서 변 수 를 정의 합 니 다 isFirst Enter 는 처음 들 어 왔 는 지,페이지 를 새로 고 쳤 는 지,기본 false 입 니 다.

 data() {
  return {
   isFirstEnter:false,
  };
 },

created 에서 is First Enter 를 true 로 바 꾸 는 것 은 페이지 에 처음 들 어가 거나 새로 고침 한 것 임 을 설명 합 니 다.

 created() {
   this.isFirstEnter=true;
   //                        
   //   keep-alive （2+ ）            
   this.$nextTick(() => {
   this.getLists();
  });
 },

activated 에 판단 조건 추가

activated() {
  if(this.$route.meta.isBack || !this.isFirstEnter){
   //   isBack false，         ，       ，         
   //   isFirstEnter true，                   ，      
   this.tradeList=[]
   this.AjaxList = []   //     ，                  
   this.pageNum = 1;
   this.$nextTick(() => {
    this.getLists();
   });
  }else{
   this.$route.meta.isBack=false
   this.isFirstEnter=false;
  }
},

이 문 제 는 vue 단일 페이지 반환 페이지 keeplive 캐 시 문 제 를 해결 하 는 것 이 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.