瀏覽器的跳轉(zhuǎn)的本質(zhì)是什么轨功，歷史記錄是如何運作的，在spa應用中是如何進行決策的？
簡介
window.history是用來保存用戶在一個會話期間的網(wǎng)站訪問記錄，并提供了相應的方法進行查詢幔嫂，相關(guān)屬性漱办，方法如下：
1、 方法 back() , forward() , go(pageNum), pushState(stateData, title, url), replaceState(stateData, title, url)
2婉烟、 屬性 length, state
3、 事件 window.onpopState
back(): 會退到上一個訪問記錄
forward(): 前進到下一個訪問記錄
go(): 跳轉(zhuǎn)到響應的訪問記錄
pushState(): 在history中創(chuàng)建一個新的訪問記錄暇屋，不能跨域似袁，且不造成頁面刷新
replaceSate(): 修改當前記錄，不能跨域咐刨，且不造成頁面刷新
另外昙衅，HTML5新增了可以監(jiān)聽history和hash訪問變化的全局方法：
window.onpopstate: 當調(diào)用history.go(),history.back(),history.forward()時觸發(fā)，pushState().replaceState()方法不會觸發(fā)
window.onhashchange: 當前url的錨鏈接（以#開始）發(fā)生改變時觸發(fā)定鸟，觸發(fā)的情況如下:
a而涉、通過設置Location 對象 的 location.hash 或 location.href 屬性修改錨部分联予；
b啼县、使用不同history操作方法到帶hash的頁面;
c、點擊鏈接跳轉(zhuǎn)到錨點
瀏覽器history的發(fā)展
我們知道在使用location.href沸久、a標簽的href[非錨點的方式]等季眷，進行頁面訪問時，頁面會刷新卷胯。但隨著大前端時代的到來子刮，產(chǎn)生了異步單頁來提升性能。我們不再希望每次的跳轉(zhuǎn)都帶來頁面的刷新窑睁，而是希望這種跳轉(zhuǎn)僅僅引發(fā)數(shù)據(jù)變化挺峡，從而改變視圖。
此時担钮，產(chǎn)生了HTML5 history API橱赠。這些API，是為了解決異步單頁的路由問題裳朋，使得頁面在不刷新的情況下病线，帶來視圖的變化，同時變化后的信息能得到準確的傳播鲤嫡。
下面來看看一個應用場景的實例：我們在訪問一個新聞列表頁送挑，找到一篇感興趣的新聞，文章的內(nèi)容通過ajax的方式獲取到暖眼。我們覺得這篇文章很有趣惕耕，并將其分享給了朋友們。如果url地址沒有變化诫肠，朋友們訪問的將是列表頁司澎，而非有趣的文章欺缘。而通過HTML5的API，在異步請求ajax的同時挤安，我們可以改變url地址谚殊，朋友們訪問的也正是這篇文章。
那么蛤铜，讓我們來看看window.history是如何工作的吧～～～
瀏覽器history變化與瀏覽器的行為
如圖嫩絮，展示了初始長度為4的history棧，在不同操作方法下的變化情況围肥，下面對每步進行分析：
step1～step4：均為history的訪問方法剿干，獲取相應的歷史記錄中的url；
step5：通過location.href創(chuàng)建一個新的url記錄穆刻，其將當前url2之后的記錄清空置尔，并在其后新增url5；history長度由4變成3氢伟；history的每次新增操作榜轿，都會將其后記錄清空，在其后新增記錄朵锣。
step6：通過pushState方法創(chuàng)建一個新的url記錄差导，其也是清空、再新增記錄猪勇；
step8：通過replaceState方法修改一個url記錄设褐，其不會產(chǎn)生新記錄，而是將當前記錄進行修改泣刹。
值得注意的是助析，通過pushState新增或者修改的history記錄，被訪問時椅您，當前頁面不刷新外冀。而locaiton.href生成的記錄被訪問時，頁面將進行刷新掀泳。
Vue router的本質(zhì)
vue router其實質(zhì)是在HTML5 historyAPI雪隧、window.onpopstate、window.onhashchange上做的封裝员舵，通過一定的規(guī)則映射到對應的方法上脑沿，同時通過監(jiān)聽變化，從而實現(xiàn)單頁路由马僻。
本文轉(zhuǎn)自：https://www.cnblogs.com/hity-tt/p/7059192.html
