window.history的跳轉實質－HTML5 history API 解析

　　在上一瀏覽器跳轉行爲的測試中，咱們看到了經過不一樣的方法操做瀏覽器跳轉時，它的刷新表現有所不一樣，在這一文章中，將看看，爲什麼會產生這樣的不一樣？其背後的實質是什麼？瀏覽器的訪問歷史記錄究竟是如何運做的呢？

一、簡介

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、點擊連接跳轉到錨點。

二、瀏覽器history的發展

　　咱們知道在使用location.href、a標籤的href[非錨點的方式]等，進行頁面訪問時，頁面會刷新。但隨着大前端時代的到來，產生了異步單頁來提高性能。咱們再也不但願每次的跳轉都帶來頁面的刷新，而是但願這種跳轉僅僅引起數據變化，從而改變視圖。

　　此時，產生了HTML5 history API。這些API，是爲了解決異步單頁的路由問題，使得頁面在不刷新的狀況下，帶來視圖的變化，同時變化後的信息能獲得準確的傳播。

　　下面來看看一個應用場景的實例：咱們在訪問一個新聞列表頁，找到一篇感興趣的新聞，文章的內容經過ajax的方式獲取到。咱們以爲這篇文章頗有趣，並將其分享給了朋友們。若是url地址沒有變化，朋友們訪問的將是列表頁，而非有趣的文章。而經過HTML5的API，在異步請求ajax的同時，咱們能夠改變url地址，朋友們訪問的也正是這篇文章。

　　那麼，

　　　　讓咱們來看看window.history是如何工做的吧～～～

 

三、瀏覽器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生成的記錄被訪問時，頁面將進行刷新。

 

四、Vue router的本質

　　vue router其實質是在HTML5 historyAPI、window.onpopstate、window.onhashchange上作的封裝，經過必定的規則映射到對應的方法上，同時經過監聽變化，從而實現單頁路由。

　　再回到上一個瀏覽器刷新行爲的測試小實驗中，瞭解了history棧的變化狀況，及其中的兩種url建立方式，便能很好的理解瀏覽器在不一樣狀況下的不一樣行爲了。