Vue 3 中配置 KeepAlive 缓存需两步：一是在 App.vue 中用 router-view v-slot 解构 Component 并交由 keep-alive 动态渲染，二是在路由 meta 中设 keepAlive: true；缓存组件可使用 onActivated/onDeactivated 响应状态，支持 include 和 max 进阶控制。
Vue 3 项目初始化时配置 KeepAlive 页面缓存，核心是两步：在 App.vue 中正确包裹 <router-view></router-view>，并在 路由配置 中通过 meta 字段声明缓存策略。不需要额外安装插件，KeepAlive 是 Vue 内置组件。
App.vue 中正确使用 router-view 插槽
Vue 3 的 <router-view></router-view> 必须用 v-slot 解构出 Component，再交由 <keep-alive></keep-alive> 动态渲染——这是和 Vue 2 最关键的区别：
- 不能直接写
<keep-alive><router-view></router-view></keep-alive> - 必须用
<router-view v-slot="{ Component }"></router-view>包裹，并用<component :is="Component"></component>渲染 - 缓存与非缓存路由需分开处理，避免冲突
推荐写法（带 key 防止状态错乱）：
<script setup><br> import { useRoute } from 'vue-router'<br> const route = useRoute()<br> </script>
路由 meta 中定义缓存开关
在 router/index.ts（或 .js）的每个路由对象里添加 meta: { keepAlive: true }：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
-
keepAlive: true表示该路由组件需要被缓存 - 可选加
cacheKey字段（如'userList'），用于区分相同组件不同参数的缓存实例（例如 /user/1 和 /user/2） - 不加
keepAlive或设为false，则走非缓存分支
示例：
const routes = [{
path: '/list',
name: 'UserList',
component: () => import('@/views/UserList.vue'),
meta: { keepAlive: true, cacheKey: 'userList' }
},
{
path: '/detail/:id',
name: 'UserDetail',
component: () => import('@/views/UserDetail.vue'),
meta: { keepAlive: false }
}
]
补充：缓存组件内要响应激活/失活状态
被 <keep-alive></keep-alive> 包裹的组件不会重复触发 onMounted，但会触发专属生命周期：
-
onActivated：每次从缓存中“唤醒”并显示时执行（适合刷新数据、恢复滚动位置） -
onDeactivated：组件被隐藏、进入缓存池时执行（适合清理定时器、暂停请求）
在 setup 中使用：
onActivated(() => {
console.log('页面被激活，可在此重新拉取部分数据')
})
onDeactivated(() => {
console.log('页面被缓存，可在此释放资源')
})
进阶提示：按需控制缓存范围
如果只希望某些特定组件被缓存（而非所有 keepAlive: true 的路由），可用 :include 属性限制：
- 支持数组（组件 name）、正则、字符串（如
/^User/） - 配合 Pinia/Vuex 维护一个动态
cachedNames数组，实现运行时增删缓存 - 加
:max="5"可限制最多缓存 5 个组件实例，防内存溢出
