Vue前进刷新后退不刷新，缓存链实现

首先这个交互我也叫不出专业的名字，大致场景是这样的：

现在有一个小商城，从首页（Index）可以进入商品列表页面（List），这个List是一个无限列表，现在用户往下翻，看到某一个商品似乎比较喜欢，于是点击进入到商品详情页面（Info），看完后觉得比较满意。恩，但是货比三家嘛，于是用户返回商品列表页面，准备继续往下浏览，这时如果你将用户之前的列表刷新了会怎么样？要是我是非常不爽的，这意味着我需要重新操作一波，定位到刚刚中意的商品后，继续往下货比三家。

SomePage -> List: List重新加载
List -> Info -> List: List使用缓存
复制代码
当用户确定好商品后，决定购买了，于是进入订单页（Form），订单页默认为用户输入了历史收货地址，用户似乎有想要提醒发货的商家，于是填写了备注，然后检查下订单有误否，发现地址可以再修改一下，于是点击收货地址进入到收货地址列表页（Address），选好后我们自动为用户返回到订单页并更新收货地址，如果此时备注没有了会怎么样？

SomePage -> Form: Form重新加载
Form -> Address -> Form: Form使用缓存
复制代码以上是简单举个例子，实际上这类似我在上家公司做移动端（SPA）时碰到的问题，只不过我们是商家列表，但交互类似，刚开始我是直接用路由方式解决的，类似将Info作为List的子页面，将Address作为Form的子页面。实现是实现了，但太麻烦了，维护麻烦啊😂，并且对组内其它伙伴不太友好。直到某一次我决定对其进行重构，重构前也没有什么好思路，然后Google了一番茅塞顿开：利用keep-alive的include实现，当时知道了思路，我就没往下看了，自己动手丰衣足食😁。
统一一下词汇，下文中说的类列表页就是List，类详情页就是Info
踩坑记
刚开始我还踩了一个坑，主要是Vue的keep-alive当时很少接触，都是Copy…
首先按照之前使用（copy）keep-alive的套路是像这样的:




复制代码然后我将它改造成这样






复制代码就是控制这个include，具体的做法是，先在类列表页的路由选项meta中增加一个cacheTo字段，表示对指定页面缓存，值为一个数组，然后:
router.beforeEach((to, from, next) => {
if (isPageLikeList(from)) {
// 如果from是类列表页面
const fromCacheTo = from.meta.cacheTo
if (fromCacheTo.indexOf(to.name) > -1) {
// 如果to是类详情页面
// 将from对应的组件设置缓存
} else {
// 移除from缓存
}
}
// …
})
复制代码但想的很美，写完发现Bug比较严重，类列表页缓存老失效，为什么呢？这就要从keep-alive的include机制说起了，于是看了一下keep-alive的源码，源码中有这么一段
// …
mounted () {
this. w a t c h ( ′ i n c l u d e ′ , v a l = > p r u n e C a c h e (