共计 1187 个字符，预计需要花费 3 分钟才能阅读完成。
场景描述：一个后台管理系统，一个列表页 A 路由配置需要缓存，另一个页面 B 里面有多个跳转到 A 路由的链接。问题描述：首先访问 /A?id= 1 页面，然后到 B 页面再点击访问 A?id= 2 的页面，发现由于页面 A 设置了缓存，数据还是 id= 1 的数据，并没有更新。路由跳转情况：/B –> /A?id=1 –> /B –> /A?id=2
ps：本文记录了一下处理问题的思路，如需解决方案可直接查看文章最后。
解决思路分析
1. 尝试思路一：watch 监听
watch 监听 query 参数变化，判断参数是否发生变化。
watch: {
‘$route.query.id’: function(newVal, oldVal){
console.log(newVal, oldVal);
}
}
未解决问题的原因：watch 只能在离开页面时才能取到 oldVal 的值，如果非要以此方法处理就必须要在 vuex 里面保存这个值，下次再进行判断，处理比较繁琐。
2. 尝试思路二：deactivated 及 activated 配合判断
由于第一步我们发现，oldVal 在离开组件时才能获取到，故而想到了使用 deactivated 来存这个 query 值。然后再次进入这个路由时，用 activated 去判断试试。
computed: {
id() {
return this.$route.query.id
}
},
data () {
return {
oldId: ”, // 旧参数，用于判断是否缓存
}
},
activated() {
// 比较你的 id:
if(this.id != this.oldId){
// 重新刷新数据 …
}
},
deactivated() {
console.log(‘ 保存旧值 ’,this.id)
// this.oldVin = this.id;
this.oldVin = this.$route.query.id;
},
然而，理想很丰满，实际却发现在 deactivated 中，this.id 及 this.$route.query.id 的值都为 null。也就是 deactivated 获取不到 computed 计算的值和 this.$route.query 的值。
3. 思路三：keep-alive 的 include 属性（尚未实践）
利用 vuex 动态改变 keep-alive 的 include 属性的值，实现动态设置路由是否缓存。但是这个地方有个问题，如果侦听到 id 参数变化了，那么需要把路由 A 设置为不缓存，那么违背了路由 A 原本需要缓存的需求，此处还希望大家探讨一下。。。
解决方案
给 router-view 设置 key 为路由的完整路径即可。最后找到这种实现方案，能够解决我的问题，实在简单！
<keep-alive :include=”cacheList”>
<router-view :key=”$route.fullPath”></router-view>
</keep-alive>
最后，文笔不好，喜欢大佬们海涵，共勉。
