背景：
有一個(gè)容器頁面踏志，里面有兩個(gè)組件，根據(jù)容器中的data中某個(gè)值showPage可以切換展示A組件頁面/B組件頁面胀瞪，現(xiàn)在想要實(shí)現(xiàn)根據(jù)當(dāng)前頁面入口url中的參數(shù)識(shí)別默認(rèn)展示的是A組件頁面還是B組件頁面
目標(biāo)
完成背景中的需求需要達(dá)到兩個(gè)目標(biāo)针余，A/B相互跳轉(zhuǎn)時(shí)
- url值有更改
- 頁面展示有更改
解決問題的方法思路分析
1. 在query中增加參數(shù)識(shí)別，在切換A/B組件頁面展示時(shí)赏廓，獲取query并更改
const query=JSON.parse(JSON.stringify(this.$route.query))
delete query.showPage
this.$router.push({ path: this.$route.path, query })
有文章說用IsBinding有效涵紊，試了下，在keep-alive的時(shí)候還是沒有生效
const query=JSON.parse(JSON.stringify(this.$route.query))
delete query.showPage
query.IsBinding=true
this.$router.push({ path: this.$route.path, query })
存在的問題：query中的參數(shù)會(huì)一直在url中無法去除幔摸，因?yàn)?route是只讀模式，對(duì)象部分是他監(jiān)管不到的
2. 在params里增加參數(shù)
存在的問題：入口的URL都得改颤练，適合搭建頁面初期既忆，不適合后面的維護(hù)改造
3. watch監(jiān)聽路由
watch: {
'$route.query.showPage': function(newVal, oldVal){
console.log(newVal, oldVal);
}
}
存在的問題：watch只能在離開頁面時(shí)才能取到oldVal的值，如果非要以此方法處理就必須要在vuex里面保存這個(gè)值，下次再進(jìn)行判斷患雇，處理比較繁瑣
4. deactivated 及 activated 配合判斷
存在問題：deactivated獲取不到this.$route.query的值
5. 給router-view設(shè)置key為路由的完整路徑
<keep-alive :include="cacheList">
<router-view :key="$route.fullPath"></router-view>
</keep-alive>
存在問題：未生效跃脊，url仍舊未更新
6. 更改href配合data中的控制頁面展示的值showPage （最終采用）
容器中的this.showPage控制頁面展示A/B
更改href中的參數(shù)，再使用location.replace改變url
存在問題苛吱，更改href中的參數(shù)或者去掉其中某一個(gè)參數(shù)需要考慮情況比較多酪术，?和&在前在后，前后是否還有其他參數(shù)翠储。以下代碼采取的方式是把url中的參數(shù)全部取出來放對(duì)象中绘雁，更改或者去除我們藥改的參數(shù)，最后沖新拼接
/**
* 獲取當(dāng)前 URL 所有 GET 查詢參數(shù)
* 入?yún)ⅲ阂馕龅?URL援所，不傳則默認(rèn)為當(dāng)前 URL
* 返回：一個(gè)<key, value>參數(shù)對(duì)象
*/
// 注意庐舟，在路由#/后面的?a=1&b=2使用location.search拿不到，html后直接拼接的?a=1&b=2才可以使用location.search拿
function getUrlQueryParams(url = location.search){
const params = {};
const keys = url.match(/([^?&]+)(?==)/g);
const values = url.match(/(?<==)([^&]*)/g);
for(const index in keys){
params[keys[index]] = values[index];
}
return params;
}
/**
* 傳入對(duì)象返回url參數(shù)
* @param {Object} data {a:1}
* @returns {string}
*/
function getParam(data){
let url = '';
for(var k in data){
let value = data[k] !==undefined ? data[k] : '';
url += `&${k}=${encodeURIComponent(value)}`
}
return url ? url.substring(1) : ''
}
//
let urlArray = location.href.split('?')
let urlParams = getUrlQueryParams(urlArray[1])
delete urlParams.showPage
location.replace(urlArray[0] + getParam(urlParams))
