keep-alive缓存

#keep-alive缓存动态路由的使用指南#

代码如下图 :

javascript 复制代码
<router-view v-slot="{ Component }">    
    <keep-alive :include="['Hot', 'Notifications', 'User', 'Setting', 'Test']">                    
        <component :is="Component"  />
    </keep-alive>
</router-view>

讲解:

一、v-slot="{ Component }" 的作用

这是 Vue 的作用域插槽语法 ,用于从 <router-view> 中获取当前路由对应的组件实例。

具体解释:
  1. <router-view> 的职责

    Vue Router 的 <router-view> 是一个动态容器,会根据当前路由路径渲染对应的组件(例如 /home 渲染 HomeComponent/about 渲染 AboutComponent)。

  2. 作用域插槽的暴露

    通过 v-slot="{ Component }"<router-view> 会将当前匹配到的组件实例以 Component 变量的形式暴露给父组件。

  3. 为何需要这个语法?

    为了在 <router-view> 外层包裹其他逻辑(如添加动画、缓存控制等),需要先获取到当前路由对应的组件实例,再手动渲染它。

二、:is="Component" 的作用

这是 Vue 的动态组件语法,用于动态决定要渲染哪个组件。

具体解释:
  1. <component> 元素

    Vue 内置的 <component> 是一个特殊元素,它通过 :is 属性绑定要渲染的组件。

  2. 与路由结合

    在路由场景中,Component 是从 <router-view> 的作用域插槽中获取的当前路由组件。等价于直接渲染 <router-view> 的内容,但通过这种写法可以添加额外逻辑(例如包裹 <keep-alive>)。

三、include 的作用

1. 核心功能
  • 缓存白名单include 接受一个组件名称的数组 (字符串或正则表达式),只有匹配名称的组件才会被 <keep-alive> 缓存。

  • 避免重复渲染 :被缓存的组件切换时不会触发 onMounted 生命周期,而是通过 onActivated/onDeactivated 管理状态。

2. 必须匹配组件的 name 选项
  • 组件定义时必须显式声明 name

    被缓存的组件需要在其选项中明确设置 name 字段

Tip:

一个小tip,如果要保持路由缓存,相关跳转不要用a标签,用route.push(),不然会导致路由重新加载

相关推荐
weixin-a153003083161 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头1 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's2 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫2 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim2 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim2 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心2 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络2 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
遗憾随她而去.3 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09013 小时前
浅析Web存储系统
前端