完美解决vue之keep-alive页面缓存问题

一：摘要：使用vue开发单页面应用，如何解决页面缓存问题（尤其在手机端），如何才能做到 新打开的页面 获取最新数据，返回上一个页面获取最新的缓存页面数据？

二：页面打开和缓存流程：

三：为了解决上面的缓存流程问题，需要了解的知识：

1：keep-alive 组件； 说明： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们；

• include 属性 说明： 只要include包含组件name则缓存下来； 官方解释：允许组件有 条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示
• exclude 属性 说明： 只要exclude包含组件name则不缓存下来； 官方解释：组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示

2： 路由配置参数中的 scrollBehavior 滚动行为，主要记录滚动位置的，我们不仅可以利用来记录缓存页面滚动的位置，还可以利用 savedPosition 知道页面到底是前进 还是 后退

3：vue 生命周期 中的 2个钩子 activated 和 deactivated

activated keep-alive 组件激活时调用 下面简单讲解下，建议看vue官方文档细致了解下

deactivated keep-alive 组件停用时调用 下面简单讲解下，建议看vue官方文档细致了解下

啥意思呢？如果不使用 keep-alive，我们经常在 created 中执行页面打开前的动作，比如：ajax获取数据；

不使用 keep-alive 打开页面 执行 created

使用 keep-alive 打开页面 执行 created 之后又会执行 activated ，如果此时返回上一页（就是缓存的页面）那么只执行 activated

再解释下: 就是使用了 keep-alive 打开新页面会执行 created+activated 2个钩子 ，如果返回到缓存的页面，此时缓存页面不执行 created了，如果此时你业务需要返回 alert(1),那么这个 alert(1),只能放在activated中，放在created中无效；

四：互联网上我也看了有好几个解决方案，但都有问题，不是最佳方案，我研究vue源码后总结了完美方案，写出来，方便大家开发项目，互相学习+吐槽；

五：下面就用代码来演示步骤

第一步：router.js 新建路由

第二步：打开 APP.vue 页面 注意：这里的 cachePageName 一定是组件name，不是路由name（必须每个组件都加上name，组件name必须写成和路由name一样）

• html代码

• js代码

第三步：这里需要用到vuex，如果没安装的请自行安装vuex，这里不做解释；

第四步：修改路由中 scrollBehavior 滚动行为，在前进 和 后退 中动态删除 和 新增需要缓存的组件

第五步：关注我们，学习开发，获取更多干货教程