多城市网站建设网络技术推广服务

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

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

缓存全部页面

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

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

只缓存特定页面

利用include来包含
也可以使用exclude 反向排除

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

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