很多业务场景中，我们需要做大量的页面切换，最典型的一种情况就是列表页跳转到详情页，详情页返回列表页切换到其他详情页。如果我们每次从详情页返回列表页重新刷新列表页，需要处理数据更新+滚动位置等问题，而且用户体验也是非常的差，而 VUE 则非常贴心的为我们准备了 keep-alive 组件。keep-alive的官方文档已经非常详细了，这里不过多的介绍。
我们最常用的用法就是使用 include 和 exclude prop 值来控制页面的缓存机制，从而可以动态的修改需要缓存的页面（组件）。下面就个人使用提出几个具体的问题和应对方案。
返回刷新
就拿开头的例子来说明，比如 A 页面为工单列表，B 页面为工单详情（我们需要在 B 页面进行一些工单操作，可能会修改工单状态等）。那我们在 B 页面修改后返回 A 页面，此时有几种情况：
- 仅更新当前工单状态
- 更新列表所有工单状态（但不能让用户发现或明显感知请求更新，例如出现 loading 或者冻结）
如果我们只是简单的使用 keep-alive，这个时候可以返回 A 页面，但是无法实现上面的 2 个需求。针对第一种情况我们可以使用 eventBus、vuex、pinia 等方案修改需要更新的数据。第二种情况，我们就需要在 activated 钩子函数中刷新数据列表（此时就不能出现 loading 动画），在修改 data 或者 vuex、pinia 里面的数据进行 UI 更新操作。
嵌套路由
对于复杂的 web 应用来讲，良好的项目结构和模块划分可以大大的提高代码的可维护性，而一个良好的模块划分就有可能需要引入嵌套路由（个人见解）。如果在嵌套路由中使用 keep-alive 组件，就会出现一个问题，子路由的 deactivated 和 activated 两个生命钩子会失效，因为父级 keep-alive 会将整个子组件缓存下来，针对这种情况只能在需要更新的组件内监听路由变化执行对应的操作。
[越努力，越幸运！]