參考MDN之 pushState
事例參考震贵，可以借鑒這個(gè)網(wǎng)站 history.pushState無(wú)刷新改變url
1. pushState
說(shuō)明
瀏覽器不會(huì)向服務(wù)端請(qǐng)求數(shù)據(jù)淹魄，直接改變url地址郁惜，可以類似的理解為變相版的hash；但不像hash一樣甲锡，瀏覽器會(huì)記錄pushState的歷史記錄兆蕉，可以使用瀏覽器的前進(jìn)、后退功能作用
使用方法
pushState(state, title, url)
參數(shù)說(shuō)明
state: 可以通過(guò)history.state讀取
title: 可選參數(shù)搔体，暫時(shí)沒(méi)有用恨樟，建議傳個(gè)短標(biāo)題
url: 改變過(guò)后的url地址半醉、
2. replaceState
說(shuō)明
不同于pushState疚俱，replaceState僅僅是修改了對(duì)應(yīng)的歷史記錄
例子
打開頁(yè)面，使用瀏覽器的前進(jìn)缩多、后退呆奕，只會(huì)出現(xiàn)http://ip/page2和http://ip养晋，不會(huì)出現(xiàn)pushState的地址，因?yàn)橐呀?jīng)被replaceState給修改了
history.pushState({page: 1}, "title 1", "page1");
history.replaceState({page: 2}, "title 3", "page2");
3. 番外 popstate
說(shuō)明
當(dāng)用戶在瀏覽器點(diǎn)擊進(jìn)行后退梁钾、前進(jìn)绳泉，或者在js中調(diào)用histroy.back()，history.go()姆泻，history.forward()等零酪，會(huì)觸發(fā)popstate事件；但pushState拇勃、replaceState不會(huì)觸發(fā)這個(gè)事件四苇。
使用方法
/** 當(dāng)界面跳轉(zhuǎn)到pushState或者replaceState的時(shí)候
就會(huì)打印出來(lái)pushState或者replaceState之前設(shè)置的state值 */
window.onpopstate = function(e) {
console.log(JSON.stringify(e.state));
}
那么如何監(jiān)聽 pushState 和 replaceState 的變化呢？具體可參考該文 如何監(jiān)聽URL的變化方咆？
var _wr = function(type) {
var orig = history[type];
return function() {
var rv = orig.apply(this, arguments);
var e = new Event(type);
e.arguments = arguments;
window.dispatchEvent(e);
return rv;
};
};
history.pushState = _wr('pushState');
history.replaceState = _wr('replaceState');
window.addEventListener('replaceState', function(e) {
console.log('THEY DID IT AGAIN! replaceState 111111');
});
window.addEventListener('pushState', function(e) {
console.log('THEY DID IT AGAIN! pushState 2222222');
});
