window.history的跳轉實質－HTML5 history API 解析
在上一瀏覽器跳轉行為的測試中，我們看到了通過不同的方法操作瀏覽器跳轉時，它的重新整理表現有所不同，在這一文章中，將看看，為何會產生這樣的不同？其背後的實質是什麼？瀏覽器的訪問歷史記錄到底是如何運作的呢？
1、簡介
window.history是用來儲存使用者在一個會話期間的網站訪問記錄，並提供相應的方法進行追溯。其對應的成員如下：
方法：back()、forward()、go(num)、pushState(stateData, title, url)、replaceState(stateData, title, url)
屬性：length、state
事件：window.onpopstate
以上紅色標註的為HTML5新增特性。
方法說明：
back()：回退到上一個訪問記錄；
forward()：前進到下一個訪問記錄；
go(num)：跳轉到相應的訪問記錄；其中num大於0，則前進；小於0，則後退；
pushState(stateData, title, url)：在history中建立一個新的訪問記錄，不能跨域，且不造成頁面重新整理；
replaceState(stateData, title, url)：修改當前的訪問記錄，不能跨域，且不造成頁面重新整理；
另，HTML5新增了可以監聽history和hash訪問變化的全域性方法：
window.onpopstate：當呼叫history.go()、history.back()、history.forward()時觸發；pushState()\replaceState()方法不觸發。
window.onhashchange：當前 URL 的錨部分(以 '#' 號為開始) 發生改變時觸發。觸發的情況如下：
a、通過設定Location 物件 的 location.hash 或 location.href 屬性修改錨部分；
b、使用不同history操作方法到帶hash的頁面;
c、點選連結跳轉到錨點。
2、瀏覽器history的發展
我們知道在使用location.href、a標籤的href[非錨點的方式]等，進行頁面訪問時，頁面會重新整理。但隨著大前端時代的到來，產生了非同步單頁來提升效能。我們不再希望每次的跳轉都帶來頁面的重新整理，而是希望這種跳轉僅僅引發資料變化，從而改變檢視。
此時，產生了HTML5 history API。這些API，是為了解決非同步單頁的路由問題，使得頁面在不重新整理的情況下，帶來檢視的變化，同時變化後的資訊能得到準確的傳播。
下面來看看一個應用場景的例項：我們在訪問一個新聞列表頁，找到一篇感興趣的新聞，文章的內容通過ajax的方式獲取到。我們覺得這篇文章很有趣，並將其分享給了朋友們。如果url地址沒有變化，朋友們訪問的將是列表頁，而非有趣的文章。而通過HTML5的API，在非同步請求ajax的同時，我們可以改變url地址，朋友們訪問的也正是這篇文章。
那麼，
讓我們來看看window.history是如何工作的吧～～～
3、瀏覽器history變化與瀏覽器的行為
history棧變更圖
如圖，展示了初始長度為4的history棧，在不同操作方法下的變化情況，下面對每步進行分析：
step1～step4：均為history的訪問方法，獲取相應的歷史記錄中的url；
step5：通過location.href建立一個新的url記錄，其將當前url2之後的記錄清空，並在其後新增url5；history長度由4變成3；history的每次新增操作，都會將其後記錄清空，在其後新增記錄。
step6：通過pushState方法建立一個新的url記錄，其也是清空、再新增記錄；
step8：通過replaceState方法修改一個url記錄，其不會產生新記錄，而是將當前記錄進行修改。
值得注意的是，通過pushState新增或者修改的history記錄，被訪問時，當前頁面不重新整理。而locaiton.href生成的記錄被訪問時，頁面將進行重新整理。
4、Vue router的本質
vue router其實質是在HTML5 historyAPI、window.onpopstate、window.onhashchange上做的封裝，通過一定的規則對映到對應的方法上，同時通過監聽變化，從而實現單頁路由。
再回到上一個瀏覽器重新整理行為的測試小實驗中，瞭解了history棧的變化情況，及其中的兩種url建立方式，便能很好的理解瀏覽器在不同情況下的不同行為了。