History路由機制
用戶訪問網頁的歷史記錄通常會被保存在一個類似於棧對象中，即history對象，點擊返回就出棧，跳下一頁就入棧。 它提供了一些方法來操作頁面的前進和後退：
-
window.history.back() 返回到上一個頁面
-
window.history.forward() 進入到下一個頁面
-
window.history.go([delta]) 跳轉到指定頁面
HTML5 對History Api 進行了增強，新增了兩個Api和一個事件，分別是pushState、replaceState 和 onpopstate
pushState是往history對象裏添加一個新的歷史記錄，即壓棧。
replaceState 是替換history對象中的當前歷史。
當點擊瀏覽器後退按鈕或js調用history.back都會觸發onpopstate事件, 與其類似的還有一個事件: onhashchange 。
onhashchange是老API, 瀏覽器支持度高, 本來是用來監聽hash變化的, 但可以被利用來做客戶端前進和後退事件的監聽，onpopstate是專門用來監聽瀏覽器前進後退的, 不僅可以支持hash, 非hash的同源url也支持。
如下：
一、onhashchange 事件在當前 URL 的錨部分(以 ‘#‘ 號為開始) 發生改變時觸發 。
錨部分的實例：指定當前 URL 為
http://www.example.com/test.htm#part2 - 這個 URL 中的錨部分為 #part2。
你可以使用以下方式調用事件:
1、通過設置Location 對象 的 location.hash 或 location.href 屬性修改錨部分。 2、使用不同書簽導航到當前頁面（使用"後退" 或"前進"按鈕）3、點擊鏈接跳轉到書簽錨
demo:
<!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head>
<body>
<p>該實例演示了如何使用 addEventListener()方法 向 body 元素中添加 "onhashchange" 事件。</p> <p>點擊按鈕修改當前 URL 的錨部分為 #part5</p> <button onclick="changePart()">點我</button> <p id="demo"></p> <script> // 使用 location.hash 屬性來修改錨部分 function changePart() { location.hash = "part5"; var x = "錨部分現在為: " + location.hash; document.getElementById("demo").innerHTML = x; } window.addEventListener("hashchange", myFunction); function myFunction() { alert("錨部分已修改！"); }
</script>
</body>
</html>
二、window.onpopstatepopstate事件在window對象上的事件處理程序.
每當處於激活狀態的歷史記錄條目發生變化時,popstate事件就會在對應window對象上觸發. 如果當前處於激活狀態的歷史記錄條目是由history.pushState()方法創建,或者由history.replaceState()方法修改過的, 則popstate事件對象的state屬性包含了這個歷史記錄條目的state對象的一個拷貝.
調用history.pushState()或者history.replaceState()不會觸發popstate事件. popstate事件只會在瀏覽器某些行為下觸發, 比如點擊後退、前進按鈕(或者在JavaScript中調用history.back()、history.forward()、history.go()方法).
當網頁加載時,各瀏覽器對popstate事件是否觸發有不同的表現,Chrome 和 Safari會觸發popstate事件, 而Firefox不會.
語法：window.onpopstate = funcRef; funcRef 是個函數名.
demo:
假如當前網頁地址為http://example.com/example.html,則運行下述代碼後
window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); }; //綁定事件處理函數. history.pushState({page: 1}, "title 1", "?page=1"); //添加並激活一個歷史記錄條目 http://example.com/example.html?page=1,條目索引為1 history.pushState({page: 2}, "title 2", "?page=2"); //添加並激活一個歷史記錄條目 http://example.com/example.html?page=2,條目索引為2 history.replaceState({page: 3}, "title 3", "?page=3"); //修改當前激活的歷史記錄條目 http://ex..?page=2 變為 http://ex..?page=3,條目索引為3 //history.back(); // 彈出 "location: http://example.com/example.html?page=1, state: {"page":1}" //history.back(); // 彈出 "location: http://example.com/example.html, state: null //history.go(2); // 彈出 "location: http://example.com/example.html?page=3, state: {"page":3}即便進入了那些非pushState和replaceState方法作用過的(比如http://example.com/example.html)沒有state對象關聯的那些網頁, popstate事件也仍然會被觸發.
History路由機制