keep-Alive와 vue-router를 결합하여 캐시 페이지 효과를 실현하는 예시 코드

Vue 프로젝트의 일부 페이지에는 캐시가 필요합니다.이 기능은keep-alive 구성 요소를 통해 이루어집니다.keep-alive 구성 요소는 포함된 구성 요소의 상태를 유지하거나 다시 렌더링을 피할 수 있습니다.
루트에 있습니다.js에서 루트를 정의하고 루트에서 메타 정보(meta 필드)를 정의합니다. 캐시가 필요한 페이지는 메타 대상에 필드를 정의해야 합니다. 여기는keepalive로 설정하고true로 설정하며 반대로 캐시하지 않습니다.

{
  path: '/a',
  component: () => import('@/pages/A'),
  meta: {
   title:'A',
   keepAlive: true
  }
},
{
  path: '/b',
  component: () => import('@/pages/B'),
  meta: {
   title:'B',
   keepAlive: true
  }
},
{
  path: '/c',
  component: () => import('@/pages/C'),
  meta: {
   title:'C',
   keepAlive: true
  }
}

그런 다음 App을 수정합니다.페이지

<template>
 <div id="app">
  <!-- <router-view v-if="isRouterAlive"></router-view> -->
  <keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
 </div>
</template>

이렇게 하면 목적이 있는 페이지에 대한 캐시를 실현할 수 있다.
그러나 이때 A 페이지에서 B 페이지로 들어간 후에 A 페이지를 캐시하지 않도록 하려면 루트 갈고리 함수인 beforeRouteleave()를 조합해야 합니다.
A 페이지에 다음과 같이 쓰십시오.

beforeRouteLeave(to, from, next) {
    //   meta
    if(to.meta.title=="B"){
      from.meta.keepAlive = false; //  B ， 
    }
    next();
}

keep-Alive를 사용하면 가장 많은 문제가 이런 캐시 상태를 어떻게 없애는가입니다.예를 들어 사용자가 매번 새로운 프로세스를 조작할 때, 이때 페이지는 캐시하는 것이 옳지 않다.
예를 들어 한 사용자가 로그인한 후에 캐시된 페이지에 정보를 기입했다. 만약에 이 사용자가 로그아웃한 후에 이치에 따라 이 정보는 사라져야 한다. 즉, 초기 상태를 회복해야 한다. 그러나 이때 페이지 탭을 닫지 않는다. (탭을 새로 열면 모든 페이지를 다시 렌더링하기 때문에) 사용자가 다시 로그인하면 이전의 페이지가 캐시가 존재하는 것을 발견할 수 있다.즉, 이 페이지는 다시 렌더링되지 않았습니다.이 문제를 해결하려면activated와deactivated라는 두 가지 특수한 생존주기 함수를 언급해야 한다.그러나 주의해야 할 것은activated와deactivated 두 생존주기 함수는keep-Alive 구성 요소에만 존재한다는 것이다.keep-Alive 구성 요소 캐시가 실행될 때, 평소에 우리가 익숙한created () 와mounted () 같은 생존 주기 함수를 촉발하지 않기 때문에, 다시 렌더링되지 않기 때문에, 상태를 보존할 수 있습니다.그러나 우리는 이 두 개의 생존 주기 함수를 통해 페이지를 업데이트할 수 있다.
우선 전역적인 로고 문자를 설정합니다. 형식은 부울 값입니다. 캐시 상태인지 여부를 나타냅니다. vuex나sessionStorage에 저장할 수 있습니다.(다음은sessionStorage에 저장된 예)
사용자가 로그인에 성공했을 때 sessionStorage로 설정합니다.setItem("keepAlive",false);그런 다음 캐시 페이지에 다음 코드를 추가합니다.

activated:function(){
    if(sessionStorage.getItem("keepAlive")=='false'){
      // 
    }else{
      //to do
    }
},

총결산
이쯤에서keep-Alive가 vue-router와 결합하여 캐시 페이지 효과를 실현하는 예시 코드에 관한 글을 소개합니다. 더 많은 vue-router가 캐시 페이지를 실현하는 내용과 관련된 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!