VUE实现页面缓存的解决方案-keep-alive

（一）背景

在实际开发中，对于spa类的单页面应用，一个页面就是一个组件的概念，默认情况下，在我们打开一个新页面的时候，为了内存的不浪费，不会缓存上一个页面，但是一些时候我们的pm会给我们提一些需求，比如：
1.列表页面，我进行过滤之后跳转，返回还能看到过滤的内容
2.列表页面，我滚动道某一个位置，跳转页面回来之后，滚动位置不变

（二）实现页面缓存的方案

2.1 整个页面的数据和状态进行缓存

这个没啥说的，就是基本的页面的所有数据和状态均进行缓存，在用户返回回来之后，在created或者mounted中进行数据现场的恢复，放到这个位置来讲，当然是不推荐的，因为缓存页面的数据和状态不仅仅是数据量大的问题，还有一些状态需要考虑，整体来说就是坑一大堆。

2.2 vue的keep-alive来实现

keep-alive传送门

从文档里可以看出，keep-alive能改实现组件的缓存，但是文档中并没有提到怎么实现一个页面的缓存，但是在上面我们提到单页面开发中，每个页面都可以看做是一个单独的组件，所以也是可以实现缓存的。方案如下：

2.2.1 配置keep-alive

<keep-alive include="['Test']">
     <router-view/>
</keep-alive>

为了便于大家理解，这里的include就不用变量了，需要注意的是，include的值是一个数组，意味着他可以配置很多项，配置项的每一个值就是这个组件的名字

2.2.1 配置组件

上面提到include中的值是组件的name属性，因为这里是router-view，很多人认为是router中配置的name，其实并不是，而是指的在创建组件是命的名。

（三） 注意事项

使用页面缓存的时候要好好使用activated和deactivated这两个生命周期的钩子，因为页面被缓存之后，意味这很多时候页面的刷新需要手动来进行处理，例如，有个A页面是一级页面，当从A页面跳转到它的二级页面的时候要进行缓存，但是当切换一级页面时，不缓存，这个的配置就很重要了，使用和处理的时候也是有很多需要我们注意的地方，所以对于页面的缓存，如何使用要看大家把握啦，有啥问题欢迎留言交流