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

相关推荐
大包子13 分钟前
structuredClone vs lodash.cloneDeep:核心差异与选型指南
javascript·vue.js
weixin1997010801614 分钟前
《1688图片空间API踩坑:img.upload 与 album.* 的防盗链与CDN缓存问题》(附Python源码)
开发语言·python·缓存
海码事务所14 分钟前
Google Play 新个人开发者账号上架指南:12 人连续 14 天封闭测试怎么做?
前端
田威AI18 分钟前
图片内文字翻译的规格:输入输出、保真、自动化、时间与费用
前端·计算机视觉
不可能片场28 分钟前
命令行中文变问号 我用环境变量救了场
前端·electron
lerhxx37 分钟前
AI 应用中的上下文管理 —— 从"上下文窗口"到"分层压缩"的工程实践
前端·javascript
骑着蜗牛撵大象32744 分钟前
多 Agent 分治协作:MapReduce 模式下的并行扇出与结果归并
前端
用户55318297321 小时前
Flutter iOS 热更新深入 Dart VM:读懂函数入口、解释执行与调用桥接
前端
hweiyu001 小时前
Redis命令:BLPOP
redis·缓存
前端snow1 小时前
为什么大厂要用Postgres + mogodb的框架?
前端