業務需求
在做一個管理用戶賬戶下APP的網站，在主頁需要切換應用APP的ID，來顯示不同APP對應的數據，對不同APP進行操作。
實現方案
由於切換APP對應的是整個頁面的更新，考慮通過將APPID直接作爲URL參數，切換時，變更URL地址後的APPID，對應頁面數據通過URL參數進行請求。此時需要維護一個全局變量存儲這個APPID，於是利用了VUEX全局狀態管理。
頁面中由三部分組件組成，headerBar，sideBar，MainContent。通過headerBar下拉列表選擇appName切換appId，此時將appId存儲到VUEX維護的變量commandState中，在headerBar組件中監聽commandState的變化，變化後切換URL地址並攜帶請求參數（commandState的值）。
'$store.state.commandState': {
handler: function (val) {
this.$router.push({
path: '/console/app/info',
query: {
appid: val
}
});
}
}
注意此處存在一個小問題，如果給監聽器配置immediate:true，首次請求的URL參數爲空值。具體原因還在排查，初步考慮是commandState的值沒有變化導致切換路由URL的參數爲空。（所以不在這裏進行初次加載的監聽）
sideBar中是供用戶進行MainContent內容切換的菜單，用戶可以通過選擇菜單項切換對應APPID的MainContent內容。在sideBar中做了commandState和$route(路由)監聽，通過監聽commandState的值來進行URL變更。
'$store.state.commandState': {
handler: function (val) {
this.defaultAppId = val;
}
},
'$route'(to) {
this.$router.push({
path: to.path,
query: {
appid: this.defaultAppId
}
});
}
遇到的問題
URL地址變化以後，當前頁面的數據並沒有隨着參數APPID的變化而變化，在sideBar做切換的時候數據可以正常通過URL的參數進行請求並獲取。
問題定位以及解決
當前的路由頁面組件進行了複用，數據和內容沒用重新加載。
網上的辦法大多是以下幾種：
- 給增加一個不同:key值，這樣vue就會識別這是不同的了，然後就會進行組件的重載，鉤子函數也會如期執行。
- 給增加一個不同v-if值，來先摧毀，然後再重新創建起到刷新頁面的效果。解決路由切換，頁面不更新的實用方法
- 讓整個頁面刷新達到頁面重載的效果，此時需要用本地存儲來記錄VUEX中的commandState。vue單頁面應用刷新網頁後vuex的state數據丟失的解決方案
說一下自己走過的坑，我在之前處理sideBar切換路由時已經使用到了<router-view :key="key"></router-view>，只不過我的key是$route.path，在sideBar切換確實取消了組件的複用，然而卻疏忽了參數APPID不同的問題，然後我改成了$rotue.fullpath，它是將整個url地址進行匹配，這樣就解決了複用的問題，實現頁面更新。
而且在踩着個坑的同時，我還試圖直接使用$router.go(0)，企圖刷新以後重新加載，後來才發現，commandState早已恢復初始值。接下來我考慮使用H5的本地存儲做一下嘗試，不過這種方案是備選。