Vue路由开启keep-alive时的注意点

https://www.jianshu.com/p/42429f4d8f9e

1. 什么阶段获取数据

当引入

keep-alive

的时候，页面第一次进入，钩子的触发顺序created->
mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

我们知道

keep-alive

之后页面模板第一次初始化解析变成HTML片段后，再次进入就不在重新解析而是读取内存中的数据，即，只有当数据变化时，才使用VirtualDOM进行diff更新。故，页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。

所以，应该activated中留一份数据获取的代码，或者不要created部分，直接将created中的代码转移到activated中。

2.

$route

中的数据读不到

以前的写法是在data中将需要的

$route

数据进行赋值，便于其余方法使用，但是使用了

keep-alive

后数据需要进入页面在activated中再次获取，才能达到更新的目的。定义一个initData方法，然后在activated中启动。

initData: function () {
let _this = this;
_this.fromLocation = JSON.parse(this.$route.query.fromLocation);
_this.toLocation = JSON.parse(this.$route.query.toLocation);
_this.activeIndex = parseInt(this.$route.params.activeIndex) || 0;
_this.policyType = parseInt(this.$route.params.policyType) || 0;
},