Vue 내장 구성 요소 keep-alive 사용 예

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

사용 예:

1. 모든 페이지를 캐시합니다.

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

2. 기준 캐시 섹션 페이지

<template>
  <div id="app">
  	// 1.   name   newsList   productList  
      <keep-alive include='newsList,productList'>
         <router-view/>
      </keep-alive>
	
	// 2.   name   test  
	<keep-alive exclude='test'>
  	  <router-view/>
	</keep-alive>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

<template>
    <!--  productList html  -->
</template>
<script>
export default {
    name: "productList",  // keep-alive ， 。
    data(){
        return {}
    }
</script>

3. vue-router와 결합하여 캐시 부분 페이지

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      children: [
        {
          path: 'products',
          name: 'products',
          component: products,
          meta: {
        	keepAlive: true //  
      	  }
        },
        {
          path: 'newsDetails',
          name: 'newsDetails',
          component: newsDetails,
          meta: {
        	keepAlive: false  //  
      	  }
        }
      ]
    }
  ]
})

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

<script>
export default {
  name: 'App'
}
</script>

2. keep-alive 생명주기

1. activated

2. deactivated