记录一次vue后台管理系统解决keep-alive页面路由参数变化时缓存问题

场景描述：一个后台管理系统，一个列表页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>

最后，文笔不好，喜欢大佬们海涵，共勉。