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建立方式，便能很好的了解浏覽器在不同情況下的不同行為了。