Vue 3 中可通过动态修改 keep-alive 的 include 列表实现单个缓存清理，如移除组件名后缓存实例自动销毁；推荐封装 useRouteCache Hook 并结合路由元信息按需控制，避免 key 冲突导致失效。
Vue 3 中 keep-alive 本身不提供直接的“清除单个缓存” API，但可以通过控制其 include 列表动态增删组件名称，实现对特定页面缓存的精准清理。
用 include 动态管理缓存
keep-alive 的 include 属性决定哪些组件名会被缓存。只要把目标组件名从 include 数组中移除，对应组件的缓存实例就会被 Vue 自动销毁（下次进入时重新创建）。
- 在
App.vue或布局组件中，用响应式数组管理需要缓存的组件名，例如：const cachedNames = ref<string>(['List', 'Detail'])</string> - 将该数组绑定到
<keep-alive :include="cachedNames"> - 当需要清除某页（如
List）缓存时，执行cachedNames.value = cachedNames.value.filter(n => n !== 'List') - 为保证 DOM 更新同步，建议配合
nextTick()后再重新加入（如需立即恢复缓存）
封装可复用的缓存控制 Hook
推荐封装一个 useRouteCache Hook，集中处理增删逻辑：
-
addCache(name)：添加组件名到缓存白名单 -
removeCache(name)：从白名单中移除，触发缓存销毁 -
clearCache()：清空全部缓存 -
removeCacheEntry(name)：先删后加，实现“强制刷新”效果（适合返回列表页时重载数据）
结合路由元信息按需清理
可在路由跳转时判断上下文，自动清理特定缓存：
立即学习“前端免费学习笔记（深入）”；
- 比如从详情页（
/detail/123）返回列表页（/list），希望列表刷新：监听$route变化，检测to.name === 'List' && from.name === 'Detail'，然后调用removeCache('List') - 也可在目标页面（如 List.vue）的
onActivated钩子中判断来源，决定是否主动清理自身缓存 - 避免全局刷新或
location.reload()，保持体验连贯
注意 key 的影响
若你在 <component :is> 或 <router-view> 内部手动设置了 :key（如 :key="$route.fullPath"），会导致即使组件名相同，也被视为不同实例而重复缓存。此时清理需确保 key 策略与缓存逻辑一致，否则 include 控制可能失效。
