问题背景

在用户进入了一个带链接参数id的页面A，链接如下：

/a?id=1

但用户操作实际上是会改变id的值，此时id=2，但链接上的id无变化，然后使用id=2作为参数前进到页面b，链接如下：

/b?id=2

然后用户点击后退，返回到了页面A，此时的id=1，是最初的页面链接。但用户希望后退也是返回到id=2的页面A，而不是id=1的页面A

解决方案

通过研究window.history对象的说明和相关函数，发现window.history.replaceState函数可以解决以上的问题。因为replaceState可以替换将当前地址为指定URL，而页面不会刷新，也对后退有效
思路是：在用户操作到可以影响链接参数的动作时，新增或修改链接的参数值，等进入新页面再返回时，后退的页面就可以带上新的参数值

代码参考

//改变当前链接，urlName为页面名称,param为参数对象{id:1}
export function changeUrl(urlName,param){
   //获取当前链接
    var url = window.location.href;
     //遍历需要修改或者新增的参数
    for(let key in param){
        url = getReplaceParamUrl(url,key,param[key])
    }
    //改变当前链接
    window.history.replaceState(history.state,urlName,url);
}
//替换或者新增传入参数的值,paramName为参数,replaceWith为新值
export function getReplaceParamUrl(oUrl ,paramName,replaceWith) {
    var re=eval('/('+ paramName+'=)([^&]*)/gi');
    let str =paramName+'='+encodeURIComponent(replaceWith);
    //替换链接上原有的参数值
    if(re.test(oUrl)){
        return oUrl.replace(re,str);
    }
    //新增链接上原有的参数值
    if(oUrl.indexOf('?')!=-1){
        return oUrl+'&'+str
    }
    return oUrl+"?"+str;
}