KeepAlive 缓存需精准控制:组件必须声明name;按路由meta.keepAlive动态开关;用activated/deactivated接管生命周期;按需清除缓存防脏数据。

用 KeepAlive 缓存路由页面,核心不是“加了就完事”,而是要控制“谁缓存、何时缓存、缓存多久、怎么清”。反复进入页面重新加载数据,往往是因为缓存没生效、缓存被误清、或组件没走对生命周期。下面直接说清楚关键点和实操方法。
确保组件能被正确识别并缓存
KeepAlive 默认靠组件的 name 选项 匹配缓存,不是靠文件名、路由名或路径。如果没写 name,缓存会失效。
- 在需要缓存的页面组件中,必须显式声明
name,且与路由配置中的name保持一致(推荐一致,避免混淆) - 例如:
export default { name: 'ProductList', ... } - 若使用 `








