Vue 默认缓存，前进刷新，后退不刷新

Vue的KeepAlive缓存

一般使用keep-alive缓存的时候总会有一些特殊的需求，做页面的特殊缓存。今天就讲一下如何简单有效的利用keep-alive实现页面路由的前进刷新（即进入全新页面），后退不刷新（即沿用之前缓存的数据页面），同一个页面前进和后退不清缓存，除非退出同一个页面销毁缓存数据。

keep-alive的使用

<keep-alive>
	<router-view />
</keep-alive>

keep-alive有几个固有的参数设置：
1、include 包含所有页面缓存的name值，即要缓存的页面
2、exclude 不包含所有页面缓存的name值，即不缓存的页面

如何利用keep-alive两步实现【默认缓存，前进刷新，后退不刷新】

无需更改路由router.js，但是路由的name值一定要有

1.充分利用include

#利用include通过设置keepAliveView集来实现特殊需求动态缓存
<keep-alive :include="keepAliveView">
	<router-view></router-view>
</keep-alive>

2.充分利用watch

#利用watch通过对路由的监听来实现设置keepAliveView缓存集
data() {
  return {
    keepAliveView: []
  };
},
watch: {
  $route(to, from) {
    var idxs = this.keepAliveView.indexOf(to.name);
    if (idxs == -1) {
      this.keepAliveView.push(to.name)
    } else if (to.name != from.name) {
      var idx = this.keepAliveView.indexOf(from.name);
      this.keepAliveView.splice(idx, 1)
    }
  }
}

如此便可实现 默认缓存，前进刷新，后退不刷新 的功能，两步即可实现效果

代码截图如下：

仅供参考，学习！