vue router 配合 keep-alive 实现按需缓存：通过路由 meta 声明 keepalive、组件 name 与路由 name 一致、动态维护 cachednames 白名单；结合 deepth 判断导航方向实现前进刷新/后退复用；手动保存滚动位置、表单状态与异步数据；并在适当时机清理缓存避免内存泄漏。
Vue Router 配合 keep-alive 实现页面缓存与返回，关键不是“全开”或“全关”，而是让缓存有方向、有边界、有状态。核心在于：用路由元信息（meta）声明缓存意图，用动态 include 控制缓存名单，再借路由守卫和组件生命周期补足滚动、表单等实际体验。
按需缓存：靠 meta + 动态 include 精准开关
直接包裹整个 <router-view></router-view> 会导致所有页面被缓存，容易内存堆积且逻辑失控。更稳妥的做法是：
- 在路由配置中为需要缓存的页面添加
meta: { keepAlive: true }； - 组件自身定义明确的
name（如name: 'OrderList'），这个 name 必须与路由的name一致，且不含空格或特殊字符； - 在布局组件（如
AppLayout.vue）中维护一个响应式数组cachedNames，初始为空； - 监听
route.name变化，当目标路由满足keepAlive条件时，将其name推入cachedNames； - 在
<keep-alive :include="cachedNames"></keep-alive>中绑定该数组，实现白名单式缓存。
前进刷新、后退复用：靠 deepth 或 from/to 判断导航方向
用户从列表页 → 详情页 → 返回列表页，应复用缓存；但从首页 → 列表页，应重新加载。仅靠 keepAlive 无法区分方向，需借助额外字段：
- 在路由
meta中加入deepth（如首页deepth: 1，列表页deepth: 2，详情页deepth: 3）； - 在
watch $route或beforeEach中对比from.meta.deepth与to.meta.deepth； - 若
to.meta.deepth （即后退），且 <code>from.meta.keepAlive为真，则保留其name在include中； - 若
to.meta.deepth > from.meta.deepth（即前进），且to.meta.keepAlive为真，才加入缓存；否则不加，实现“前进刷新”。
补足真实体验：滚动位置 + 表单状态 + 异步数据
keep-alive 只冻结组件实例，不自动保存滚动条、输入框值、加载中的 pending 状态。这些必须手动处理：
- 在组件内用
ref记录scrollTop，onActivated时恢复，onDeactivated时保存； - 表单数据建议存在
data或ref中，天然随组件实例保留；若需跨会话持久，再配合 localStorage； - 异步请求状态（如 loading、error）也属组件状态，无需额外操作；但若希望返回时重新拉取新数据，可在
onActivated中加判断逻辑（例如检查时间戳是否过期）； - 配合
scrollBehavior配置：当savedPosition存在时直接返回该位置，否则默认滚顶，避免后退时跳到顶部。
释放与清理：避免缓存污染和内存泄漏
长期缓存可能带来旧数据残留或内存占用过高，尤其在用户切换账号、清空筛选条件等场景下：
- 在
beforeRouteLeave中，可依据业务逻辑决定是否主动清理：比如离开搜索结果页时清除缓存，确保下次进入是全新状态； - 利用
router.beforeEach拦截，对特定路由（如登录页、首页）重置cachedNames数组； - 组件内部可在
onDeactivated中执行轻量清理（如取消未完成的定时器、中断 pending 请求）； - 慎用
exclude，它易导致漏缓存；优先用include白名单 + 动态更新，更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
