学习Vue之【用keep-alive+路由守卫实现动态缓存页面】

        本来找同事讨论为什么手动destroyed之后keep-alive就不再生效，然后对方提出了一个不用keep-alive的方法，就是直接把详情页作为component写在列表页里，避开对列表页的状态保留问题。这确实是我很少考虑的方式！

        当然，正文还是以标题的实现方式为主。T^T

一、需求场景

        C端产品大多会要求页面能够保持离开时的状态，例如：在商品列表输入了/咖啡豆/的关键字，点击商品进入详情后返回，用户99%希望列表还能维持原状，方便自己继续挑选。

        其实是个很常见的交互场景，之所以提出来，是在我负责的产品早期选择了一种不够动态的页面缓存方式，导致后续维护代价高。由此做个开发过程记录，包括其中的几次碰壁。

二、问题原因

        原代码逻辑：

        原代码逻辑里，通过keep-alive包裹router-view，然后在需要保留状态的页面路由里定义true，就能实现页面缓存。

        显然，这并不符合动态的概念。也就是说，如果商品列表返回到首页后再次进入，需要单独reset所有筛选条件。—— 好大一个坑

        结合需求中的交互场景，动态 需要 路由守卫 来判断，什么时候缓存、什么时候不缓存。 

 三、解决方案

3.1 入口文件

        仅保留router-view。

3.2 增加layout组件

        同样用keep-alive包裹router-view，但增加路由守卫。

beforeRouteEnter (to, from, next) {
    next(vm => {
        // 目标页面index
        let defaultToIndex = vm.defaultViews.indexOf(to.name)
        // 来源页面index
        let defaultFromIndex = vm.defaultViews.indexOf(from.name)

        if (from.name === 'home' && defaultToIndex > -1) {
          // 缓存
          if (vm.cachedViews.indexOf(vm.defaultViews[defaultToIndex]) === -1) {
              vm.cachedViews.push(vm.defaultViews[defaultToIndex])
          }
        } else if ((to.name === 'login' || to.name === 'home') && defaultFromIndex > -1) {
          // 不缓存
          let index = vm.cachedViews.indexOf(vm.defaultViews[defaultToIndex])
          vm.cachedViews = vm.cachedViews.splice(index, 1)
        }
    })
}

        这里是为了让方法更公共一些，所以定义了两个变量 —— defaultViews和cachedViews。defaultViews表示默认缓存的页面，cachedViews表示当前需要缓存的页面。

1、来源是首页，目标是需要缓存的页面，cachedViews里得有to.name；

2、目标是首页/登录页，来源是不需要缓存的页面，cachedViews里不能有to.name。

3.3 调整router

四、总结

         在调整过程中，有考虑手动destroyed的方式，但遇到了keep-alive不再生效的问题。参考网上的帖子，大多都是直接阐述新的解决方案，并未提及问题根源。

        但是根据其他博主对$destroy的定义和vue-devtool的使用来看，我推测了以下逻辑：

        触发过$destroy后，inactive状态下的虚拟DOM始终存在，并被keep-alive缓存着。

        其实$destroy销毁了连接，inactive无法被激活，而生成的新DOM和原DOM的路由name一致，所以也不会覆盖缓存。

        这就导致给人的感觉是新的页面组件不被缓存、keep-alive失效。（我猜的！！！）

五、参考来源

vue组件销毁重置详解

关于vue的keep-alive缓存页面使用$destroy后不能在次缓存的另一种解决方案