Vue에서 keepalive 캐시 해제 문제 해결

1. 앱 보기.vue 파일, 이게 포인트입니다. 더하는 것을 잊어서는 안 됩니다.

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

2. 라우터를 봅니다.js

{
 path:'/loanmessage',
 component:loanmessage,
 name:'loanmessage',
 meta: {
  keepAlive: true, // 
  isBack: false,
 },

3. 캐시가 필요한 페이지에 다음과 같은 코드를 추가합니다

beforeRouteEnter(to, from, next) {
 if (from.name == 'creditInformation' || from.name == 'cityList') {
  to.meta.isBack = true;
 }
 next();
},
activated() {
 this.getData()
 this.$route.meta.isBack = false
 this.isFirstEnter = false
 
},

갈고리 함수 실행 순서 첨부:

keep-alive를 사용하지 않습니다.

beforeRouteEnter --> created --> mounted --> destroyed

keep-alive 사용하기

beforeRouteEnter --> created --> mounted --> activated --> deactivated
캐시 페이지에 다시 들어가면 beforeRouteEnter -->activated -->deactivated만 터치합니다.created와 mounted는 더 이상 실행되지 않습니다.
총결산
Vue에서 keepalive를 사용하여 캐시하지 않는 문제 (해결됨) 에 대한 이 글을 소개합니다. 더 많은 관련 Vue에서 keepalive를 사용하여 캐시하지 않는 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!