vue的KeepAlive应用（针对全部页面及单一页面进行缓存）

苦夏木禾2025-01-11 14:57

KeepAlive的作用是缓存包裹在其中的动态切换组件

当一个组件在中被切换时，它的 activated 和 deactivated 生命周期钩子将被调用，用来替代 mounted 和 unmounted。这适用于的直接子节点及其所有子孙节点。

缓存全部页面

将app.vue中的路由出口改为：

html 复制代码

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

利用include来包含

也可以使用exclude 反向排除

html 复制代码

<router-view v-slot="{ Component }">
  <keep-alive :include="['HomePage']">
    <component :is="Component" />
  </keep-alive>
</router-view>

HomePage 指的是HomePage 组件或者内部有属性name为HomePage 的组件