Vue3-KeepAlive路由缓存

用法

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在 <keep-alive> 内被切换时，它的 mounted 和 unmounted 生命周期钩子不会被调用，取而代之的是activated和deactivated.

使用

• 在路由组件配置文件当中配置组件是否需要被缓存，配置meta属性

{ 
  path: '/dynamic', 
  name: 'Dynamic', 
  component: () => import('@/views/Dynamic.vue'), 
  meta: { 
    keepAlive: true, 
    showFooter: true, 
   } 
},

• 在根组件App.vue中使用keep-alive标签包含需要缓存的组件

<!-- 这是vue3的写法，与vue2的写法有所区别，如果这里使用vue2.x写法，会有警告 -->
<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
  </keep-alive>
  <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
</router-view>

• 缓存页面使用

onActivated(() => { // 被包裹组件被激活的状态下触发
      // 逻辑代码
 }
onDeactivated(() => { // 在被包裹组件停止使用时触发
    // 逻辑代码
})

注意

• 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated，所以别在mounted和activated方法中写相同的逻辑代码

• 多页面缓存需要配置key属性，来表示组件的唯一性和对应关系，如：:key="$route.path"

• 不要动态修改meta.keepAlive的值控制是否缓存，因为第一次是创建组件，没有缓存，需要缓存后，下一次进入才不会触发逻辑代码，如果最开始进入的时候meta.keepAlive值为false的话，渲染的是没有使用keep-alive的组件，则会触发相应代码