问题背景
在用户进入了一个带链接参数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;
}
