前端不跳转替换URL参数

var HtmlPrefix = "";

function ReplaceURLParam(){

　　var urtTarget = "PageRowID=" + id+ "&page=BasicInfo";
　　var encryData = window.btoa(window.encodeURIComponent(urtTarget));
　　var newUrl = GetRootPath() + "/HTML/Customer/CustomerBasicManage.html" + "?" + encryData;
　　window.history.replaceState('', '', newUrl);

}

function GetRootPath() {
　　var origin = window.document.location.origin;
　　if (HtmlPrefix != "" && HtmlPrefix != null && HtmlPrefix != undefined) {
　　　　origin = "/" + HtmlPrefix;
　　}
　　return origin;
}

 

在项目中遇到要实现修改地址栏但是页面不可以刷新的需求

查阅资料发现可以用window.history.pushState(state, title, url)和window.history.replaceState(state, title, url)

三个参数：

state：一个与添加的记录相关联的状态对象，主要用于popstate事件。该事件触发时，该对象会传入回调函数。也就是说，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。如果不需要这个对象，此处可以填null或者空字符串。

title：新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串。

url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址，不会检查url是否存在。

两者区别：

pushState()方法是在历史记录中增加一条新的记录，pushState()因为留下记录，所以可以回撤

replaceState()方法是将当前的历史记录给替换掉，不会在history中留下记录,因为未留下记录，所以无法返回