Vue页面缓存

Vue中使用keep-alive实现页面之间的缓存

vue2.0中提供了keep-alive来缓存组件，避免多次加载相应的组件，减少性能的消耗

keep-alive是Vue的内置组件，能在组件切换过程中将用户的操作状态保留，防止重复渲染DOM，结合vue-router使用，可以缓存某个view的整个内容

语法：

    <keep-alive>
        <component>
            <!-- 需要缓存的组件 -->
        </component>
     </keep-alive>

一般有这种需求的都是第一次进入页面时请求一次数据，后面通过路径切换或者前进/后退进入该页面时，页面都使用缓存数据，DOM不会刷新

结合keep-alive实现特定页面特定条件下的缓存

需求内容：

A => A_1 「A页面缓存」
A => A_2 「A页面缓存」
B => A 「A页面不缓存」

这种需求，最开始的想法是更改keepAlive，最后发现行不通。那么最后的解决办法是：

1. 将A页面设置为缓存页面
2. 记录页面跳转，即上一个页面的是哪一个
3. 在A页面中判断上一个页面是不是A_1、A_2，若不是，就进行手动刷新，因为页面缓存后，第二次进入不会触发「created」「mounted」相关生命钩子函数。

具体代码，如下：

1. 在路由中配置缓存页面

{
  meta: {
    keepAlive: true
  }
}

2. 配置keep-alive

<div>
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

方法一：
3. 在A页面判断是否需要刷新

beforeRouteEnter(to, from, next) {
  if (from.name !== "A_1" && from.name !== "A_2") {
    next(vm => {
      vm.initData(1, vm.pageSize);
    });
  } else {
    next();
  }
}

方法二：
3. 在main.js中记录上一个路由的地址

router.beforeEach((to, from, next) => {
  Vue.prototype.beforeRouter = from;
  next();
})

4. 在A页面判断是否需要刷新

activated() {
  const beforeRouterName = this.beforeRouter.name;
  if (beforeRouterName && beforeRouterName !== 'A_1') {
    // 手动刷新页面
    this.initData(1, this.pageSize);
  }
}