隨著 ajax 的使用越來越廣泛，前端的頁面邏輯開始變得越來越復雜，特別是spa的興起，前端路由系統隨之開始流行。

1.從用戶的角度看，前端路由主要實現了兩個功能（使用ajax更新頁面狀態的情況下）：

2.記錄當前頁面的狀態（保存或分享當前頁的url，再次打開該url時，網頁還是保存（分享）時的狀態）；可以使用瀏覽器的前進后退功能（如點擊后退按鈕，可以使頁面回到使用ajax更新頁面之前的狀態，url也回到之前的狀態）；

作為開發者，要實現這兩個功能，我們需要做到：

1.改變url且不讓瀏覽器向服務器發出請求；

2.監測 url 的變化；

3.截獲 url 地址，并解析出需要的信息來匹配路由規則。

我們路由常用hash模式和history模式實際上就是實現了上面的功能。

hash模式

hash是指url后的#以及后面的字符。這里的#和css中的#是一個意思。hash也稱作錨點? 本身是用作做頁面定位的，它可以讓對應id的元素顯示在可視區域內。

window.location.hash = 'qq' // 設置 url 的 hash，會在當前url后加上 '#qq'

? ? ? ? ? ? var hash = window.location.hash // '#qq'?

? ? ? ? ? ? window.addEventListener('hashchange', function(){?

? ? ? ? ? ? 監聽hash變化，點擊瀏覽器的前進后退會觸發

? ? })

已經有 hash 模式了，而且 hash 能兼容到IE8， history 只能兼容到 IE10，為什么還要搞個 history 呢？

首先，hash 本來是拿來做頁面定位的，如果拿來做路由的話，原來的錨點功能就不能用了。其次，hash 的傳參是基于 url 的，如果要傳遞復雜的數據，會有體積的限制，而 history 模式不僅可以在url里放參數，還可以將數據存放在一個特定的對象中。

window.history.pushState(state, title, url)?

state：需要保存的數據，這個數據在觸發popstate事件時，可以在event.state里獲取

?title：標題，基本沒用，一般傳 null

url：設定新的歷史記錄的 url。新的 url 與當前 url 的 origin 必須是一樣的，否則會拋出錯誤。url可以是絕對路徑，也可以是相對路徑。

如?在百度頁面控制臺輸出：

window.history.pushState(null, null, "https://www.baidu.com/?name=history");

地址欄會變為：https://www.baidu.com/?name=history

執行history.pushState(null, null, './qq/')，則變成 https://www.baidu.com/qq/

上面的例子中改變url頁面并沒有刷新，同樣根據API所述，瀏覽器會產生瀏覽記錄。