Vue3 keep-alive 怎么缓存路由组件状态？

Question

仓乃文 · Accepted Answer

路由切换时组件默认会销毁重建，表单填写内容、滚动位置等状态全部丢失。keep-alive 缓存组件实例，切换时不销毁，再次进入时恢复状态。缓存路由组件： ```html

``` 缓存条件控制： ```html ``` 组件内生命周期： ```javascript import { onActivated, onDeactivated } from "vue"; onActivated(() => { console.log("组件被激活，恢复状态"); }); onDeactivated(() => { console.log("组件被停用，状态保留"); }); ``` 补充说明： - include/exclude 匹配组件的 name 选项，字符串或正则 - max 设置最大缓存数，超出时按 LRU 策略销毁最久未使用的 - onActivated/onDeactivated 是 keep-alive 组件专属的生命周期 - 缓存过多组件会占用内存，建议设置 max 限制 - 被缓存的组件不会触发 onMounted/onUnmounted，用 onActivated/onDeactivated 替代