keep-alive缓存

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

代码如下图 ：

讲解：

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

这是 Vue 的作用域插槽语法，用于从  中获取当前路由对应的组件实例。

具体解释：

1.  的职责
   Vue Router 的  是一个动态容器，会根据当前路由路径渲染对应的组件（例如 /home 渲染 HomeComponent，/about 渲染 AboutComponent）。

2. 作用域插槽的暴露
   通过 v-slot="{ Component }"， 会将当前匹配到的组件实例以 Component 变量的形式暴露给父组件。

3. 为何需要这个语法？
   为了在  外层包裹其他逻辑（如添加动画、缓存控制等），需要先获取到当前路由对应的组件实例，再手动渲染它。

二、:is="Component" 的作用

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

具体解释：

1.  元素
   Vue 内置的  是一个特殊元素，它通过 :is 属性绑定要渲染的组件。

2. 与路由结合
   在路由场景中，Component 是从  的作用域插槽中获取的当前路由组件。等价于直接渲染  的内容，但通过这种写法可以添加额外逻辑（例如包裹 ）。

三、include 的作用

1. 核心功能

• 缓存白名单：include 接受一个组件名称的数组（字符串或正则表达式），只有匹配名称的组件才会被  缓存。

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

2. 必须匹配组件的 name 选项

• 组件定义时必须显式声明 name
  被缓存的组件需要在其选项中明确设置 name 字段

Tip：

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