(vue) keep-alive下在同一个路由下更改url

背景：

有一个容器页面，里面有两个组件，根据容器中的data中某个值showPage可以切换展示A组件页面/B组件页面，现在想要实现根据当前页面入口url中的参数识别默认展示的是A组件页面还是B组件页面

目标

完成背景中的需求需要达到两个目标，A/B相互跳转时

1. url值有更改
2. 页面展示有更改

解决问题的方法思路分析

1. 在query中增加参数识别，在切换A/B组件页面展示时，获取query并更改

const query=JSON.parse(JSON.stringify(this.$route.query))
delete query.showPage
this.$router.push({ path: this.$route.path, query })

有文章说用IsBinding有效，试了下，在keep-alive的时候还是没有生效

const query=JSON.parse(JSON.stringify(this.$route.query))
delete query.showPage
query.IsBinding=true
this.$router.push({ path: this.$route.path, query })

存在的问题：query中的参数会一直在url中无法去除，因为$route是只读模式，对象部分是他监管不到的

2. 在params里增加参数

存在的问题：入口的URL都得改，适合搭建页面初期，不适合后面的维护改造

3. watch监听路由

watch: {
    '$route.query.showPage': function(newVal, oldVal){
        console.log(newVal, oldVal);
    }
}

存在的问题：watch只能在离开页面时才能取到oldVal的值，如果非要以此方法处理就必须要在vuex里面保存这个值，下次再进行判断，处理比较繁琐

4. deactivated 及 activated 配合判断

存在问题：deactivated获取不到this.$route.query的值

5. 给router-view设置key为路由的完整路径

<keep-alive :include="cacheList">
    <router-view :key="$route.fullPath"></router-view>
</keep-alive>

存在问题：未生效，url仍旧未更新

6. 更改href配合data中的控制页面展示的值showPage （最终采用）

容器中的this.showPage控制页面展示A/B
更改href中的参数，再使用location.replace改变url

存在问题，更改href中的参数或者去掉其中某一个参数需要考虑情况比较多，?和&在前在后，前后是否还有其他参数。以下代码采取的方式是把url中的参数全部取出来放对象中，更改或者去除我们药改的参数，最后冲新拼接

/**
* 获取当前 URL 所有 GET 查询参数
* 入参：要解析的 URL，不传则默认为当前 URL
* 返回：一个<key, value>参数对象
*/
// 注意，在路由#/后面的?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;
}
 /**
* 传入对象返回url参数
* @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))