router.go(-1)后退带参数或者替换参数

本文主要是介绍router.go(-1)后退带参数或者替换参数，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题背景

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