寫在前面：通常 SPA 中前端路由有2種實現(xiàn)方式：

window.history location.hash

下面就來介紹下這兩種方式具體怎么實現(xiàn)的

一.history

1.history基本介紹

window.history 對象包含瀏覽器的歷史，window.history 對象在編寫時可不使用 window 這個前綴。history是實現(xiàn)SPA前端路由是一種主流方法，它有幾個原始方法：

history.back() - 與在瀏覽器點擊后退按鈕相同 history.forward() - 與在瀏覽器中點擊按鈕向前相同 history.go(n) - 接受一個整數(shù)作為參數(shù)，移動到該整數(shù)指定的頁面，比如go(1)相當于forward()，go(-1)相當于back()，go(0)相當于刷新當前頁面 如果移動的位置超出了訪問歷史的邊界，以上三個方法并不報錯，而是靜默失敗

在HTML5，history對象提出了 pushState() 方法和 replaceState() 方法，這兩個方法可以用來向歷史棧中添加數(shù)據(jù)，就好像 url 變化了一樣（過去只有 url 變化歷史棧才會變化），這樣就可以很好的模擬瀏覽歷史和前進后退了，現(xiàn)在的前端路由也是基于這個原理實現(xiàn)的。

2.history.pushState

pushState(stateObj, title, url) 方法向歷史棧中寫入數(shù)據(jù)，其第一個參數(shù)是要寫入的數(shù)據(jù)對象（不大于640kB)，第二個參數(shù)是頁面的 title, 第三個參數(shù)是 url (相對路徑)。

stateObj ：一個與指定網(wǎng)址相關(guān)的狀態(tài)對象，popstate事件觸發(fā)時，該對象會傳入回調(diào)函數(shù)。如果不需要這個對象，此處可以填null。 title：新頁面的標題，但是所有瀏覽器目前都忽略這個值，因此這里可以填null。 url：新的網(wǎng)址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網(wǎng)址。

關(guān)于pushState，有幾個值得注意的地方：

pushState方法不會觸發(fā)頁面刷新，只是導致history對象發(fā)生變化，地址欄會有反應,只有當觸發(fā)前進后退等事件（back()和forward()等）時瀏覽器才會刷新

這里的 url 是受到同源策略限制的，防止惡意腳本模仿其他網(wǎng)站 url 用來欺騙用戶，所以當違背同源策略時將會報錯

3.history.replaceState

replaceState(stateObj, title, url) 和pushState的區(qū)別就在于它不是寫入而是替換修改瀏覽歷史中當前紀錄，其余和 pushState一模一樣

4.popstate事件

定義：每當同一個文檔的瀏覽歷史（即history對象）出現(xiàn)變化時，就會觸發(fā)popstate事件。

注意：僅僅調(diào)用pushState方法或replaceState方法 ，并不會觸發(fā)該事件，只有用戶點擊瀏覽器倒退按鈕和前進按鈕，或者使用JavaScript調(diào)用back、forward、go方法時才會觸發(fā)。另外，該事件只針對同一個文檔，如果瀏覽歷史的切換，導致加載不同的文檔，該事件也不會觸發(fā)。

用法：使用的時候，可以為popstate事件指定回調(diào)函數(shù)。這個回調(diào)函數(shù)的參數(shù)是一個event事件對象，它的state屬性指向pushState和replaceState方法為當前URL所提供的狀態(tài)對象（即這兩個方法的第一個參數(shù)）。