vue+keep-alive가 웹사이트 캐시를 작동하는 방법

이번에는 vue+keep-alive가 웹사이트 캐시를 어떻게 운영하는지 보여드리고, vue+keep-alive를 사용하여 웹사이트 캐시를 운영할 때 주의사항은 무엇인지 살펴보겠습니다.

Vue는 컴포넌트 정보 캐싱을 구현합니다

vue 프로젝트를 개발할 때 경로가 다른 컴포넌트로 전환된 후 반환된 후 컴포넌트 데이터가 다시 로드되는 것은 불가피합니다. 이러한 상황을 처리하려면 다음이 필요합니다. 연결 유지를 사용하려면 다시 로드되지 않도록 구성 요소 정보를 캐시합니다.

1. app.vue에서

<keep-alive>
  <router-view></router-view>
</keep-alive>

그러나 이 경우 모든 구성 요소가 캐시되므로 단일 구성 요소를 캐시하는 효과를 얻을 수 없습니다.

그런 다음 몇 가지 구성 요소를 추가하고 구현 방법은 다음과 같습니다.

in app.vue

<!--这里是需要keepalive的-->
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
<keep-alive>
<!-- 这里不会被keepAlive -->
<router-view v-if="!$route.meta.keepAlive"></router-view>

2. 라우팅 index.js 페이지에서

{
  path: '',
  name: '',
  component: '',
  meta: {keepAlive: true}   // 这个是需要keepalive的
}，
{
  path: '',
  name: '',
  component: ,
  meta: {keepAlive: false}  // 这是不会被keepalive的
}

일부 구성 요소의 캐싱 기능을 구현합니다

캐시된 구성 요소가 데이터를 지우거나 초기화 방법을 수행하려는 경우 구성 요소를 로드할 때 다음과 같이 활성화된 후크 기능을 호출하세요.

activated: function () {
  this.data = ‘'
}

더 흥미로운 정보를 보려면 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. , PHP 중국어 웹사이트 기사에서 다른 관련 주제에 주목하세요!

추천 도서:

vue-route+beforeEach를 사용하여 탐색 가드 만들기

Webpack이 캐시를 작동하는 방법

위 내용은 vue+keep-alive가 웹사이트 캐시를 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!