記錄一次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>

最後，文筆很差，喜歡大佬們海涵，共勉。