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

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 的组件

相关推荐
爱勇宝12 分钟前
裁员裁掉了那个干了14年的人:我这才看清职场的5条潜规则
前端·后端·程序员
Hilaku16 分钟前
GraphQL 在国内为什么水土不服?
前端·javascript·程序员
Latchh24 分钟前
PDF打开不要密码却显示已加密,前端怎么判断
前端·图像处理·人工智能·计算机视觉·pdf
秋天的一阵风25 分钟前
🧐 为什么大厂 RAG 从不用纯向量检索?
前端·面试·ai编程
恋猫de小郭35 分钟前
Flutter + EmbeddingGemma 2,谷歌发布完全端侧的 AI Edge Foresight
android·前端·flutter
FITA阿泽要努力41 分钟前
第1周·第2讲|一道综合代码推演
服务器·前端·python·agent.
iCxhust42 分钟前
如何批量导出edge保存的密码
前端·windows·edge
JarvanMo44 分钟前
写 Flutter 不用再套六层 Widget 了
前端
小羊没烦恼!1 小时前
关于大型asp.net应用系统的架构-架构的选择
java·服务器·开发语言·前端·c#
GISer_Jing1 小时前
height、line-height、font-size相同字体遮挡问题
前端·ai