动态路由配合KeepAlive缓存需三点：组件显式声明唯一name；router-view用:key（如$router.fullPath）隔离实例；KeepAlive通过include精确指定缓存组件名。

动态路由配合 KeepAlive 缓存动态加载的组件，关键在于两点：一是让每个参数不同但组件相同的路由（比如 /user/1 和 /user/2）被识别为独立实例；二是确保组件能被 KeepAlive 正确识别并纳入缓存池。缺一不可。

组件必须有稳定且唯一的 name

动态路由通常复用同一个组件文件（如 UserDetail.vue），但 KeepAlive 不认路径或路由名，只认组件自身的 name 选项。

• 在组件中显式声明 name: 'UserDetail'，不能依赖文件名自动推导（尤其异步加载时容易失效）
• name 必须是字符串字面量，大小写敏感，和 include 列表中的值完全一致
• 避免使用计算属性或变量生成 name，否则可能在 HMR 或 SSR 场景下不一致

用 :key 强制区分不同参数的实例

仅靠 name 不够——KeepAlive 会把所有 /user/:id 当作同一组件处理，导致状态互相覆盖。必须通过 router-view 的 :key 触发实例隔离。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 推荐写法：（简单可靠，含查询参数）
• 更精准写法：:key="$route.name + '-' + $route.params.id"（适合多路由共用同一组件名的场景）
• 禁止用 $route.params 对象本身作 key，因为它是响应式对象，引用不变，无法触发重渲染

用 include 精确控制缓存范围

KeepAlive 默认不缓存任何组件，必须通过 include 显式放行。动态加载的组件也不例外。

• 在布局中包裹：
• 不建议用正则或通配符（如 include="User*"），易误匹配或漏匹配
• 若需运行时增删缓存，可绑定响应式数组（如 cachedViews），配合路由守卫动态维护

配合 activated/deactivated 做状态微调

缓存后组件不再走 created/mounted，但常需在激活/失活时做轻量操作。

• activated 中可恢复滚动位置、检查数据是否过期、重启定时器
• deactivated 中应清除定时器、暂停轮询、保存临时编辑内容到 localStorage
• 避免在 activated 里无条件重新拉取全部数据，违背缓存本意

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！