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

相关推荐
小桥风满袖17 分钟前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花33 分钟前
i18n国际语言化配置
前端
编程贝多芬36 分钟前
Promise 的场景和最佳实践
前端·javascript
Asort38 分钟前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio40 分钟前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗43 分钟前
JS的对象属性存储器
前端
Lotzinfly44 分钟前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
开源之眼1 小时前
React中,useState和useReducer有什么区别
前端
普郎特1 小时前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript
可观测性用观测云1 小时前
前端错误可观测最佳实践
前端