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

场景描述：一个后台管理系统，一个列表页A路由配置需要缓存，另一个页面B里面有多个跳转到A路由的链接。问题描述：首先访问/A?id=1页面，然后到B页面再点击访问A?id=2的页面，发现由于页面A设置了缓存，数据还是id=1的数据，并没有更新。路由跳转情况：/B –> /A?id=1 –> /B –> /A?id=2ps： 本文记录了一下处理问题的思路，如需解决方案可直接查看文章最后。解决思路分析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>最后，文笔不好，喜欢大佬们海涵，共勉。