vue에서 연결 유지 구성 요소의 역할 및 사용

---

vue에서 연결 유지 구성 요소의 역할

Keep-alive는 구성 요소 상태를 유지하고 다시 렌더링을 방지하는 데 사용됩니다.
이 문제는 경로 캐시 속성이라고도 합니다
.

• 포함: 문자열 또는 정규식. 일치하는 구성 요소만 캐시됩니다.
• 제외: 문자열 또는 정규식. 일치하는 구성 요소는 캐시되지 않습니다.

예: 목록 페이지와 세부정보 페이지가 있는 경우 사용자는 세부정보 열기 => 목록으로 돌아가기 => 세부정보 열기를 자주 실행합니다. 이 경우 목록과 세부정보가 모두 매우 빈번한 페이지인 경우 < 목록 구성 요소에 대한 keep -alive></keep-alive> 캐시를 사용하면 사용자가 목록으로 돌아올 때마다 다시 렌더링하는 대신 캐시에서 빠르게 렌더링할 수 있습니다.

1. 올캐시

Keep-alive 태그를 사용하여 router-view를 래핑하면 전체 캐싱을 달성할 수 있습니다.

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

2. 지정된 단일 경로를 캐시합니다.

또한 Keep-alive 태그를 사용하여 라우터 보기를 래핑하고 Keep-alive에 포함을 사용하여 캐시해야 하는 페이지 이름을 지정합니다.

<keep-alive include='缓存页面的名称'>
  <router-view> </router-view>
</keep-alive>

3. 지정된 여러 경로를 캐시합니다.

두 개의 router-view 태그를 캐시 아웃렛으로 사용하고 다른 하나는 캐시 프리 아웃렛으로 사용해야 하며, 라우팅 구성 시 캐시된 페이지에 메타 속성을 추가한 후 keepAlive 값을 설정해야 합니다.

<keep-alive>

  <router-view v-if="$route.meta.keepAlive"></router-view>

</keep-alive>

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

{
    
    
 path:'/car',
 name:'car',
 component: Car,
 meta: {
    
    keepAlive: true} //true缓存 false不缓存
}