瀏覽器的跳轉(zhuǎn)的本質(zhì)是什么，歷史記錄是如何運(yùn)作的，在spa應(yīng)用中是如何進(jìn)行決策的？
簡(jiǎn)介
window.history是用來(lái)保存用戶在一個(gè)會(huì)話期間的網(wǎng)站訪問(wèn)記錄，并提供了相應(yīng)的方法進(jìn)行查詢，相關(guān)屬性，方法如下：
1、 方法 back() , forward() , go(pageNum), pushState(stateData, title, url), replaceState(stateData, title, url)
2、 屬性 length, state
3、 事件 window.onpopState
back(): 會(huì)退到上一個(gè)訪問(wèn)記錄
forward(): 前進(jìn)到下一個(gè)訪問(wèn)記錄
go(): 跳轉(zhuǎn)到響應(yīng)的訪問(wèn)記錄
pushState(): 在history中創(chuàng)建一個(gè)新的訪問(wèn)記錄，不能跨域，且不造成頁(yè)面刷新
replaceSate(): 修改當(dāng)前記錄，不能跨域，且不造成頁(yè)面刷新
另外，HTML5新增了可以監(jiān)聽(tīng)history和hash訪問(wèn)變化的全局方法：
window.onpopstate: 當(dāng)調(diào)用history.go(),history.back(),history.forward()時(shí)觸發(fā)，pushState().replaceState()方法不會(huì)觸發(fā)
window.onhashchange: 當(dāng)前url的錨鏈接（以#開(kāi)始）發(fā)生改變時(shí)觸發(fā)，觸發(fā)的情況如下:
a、通過(guò)設(shè)置Location 對(duì)象 的 location.hash 或 location.href 屬性修改錨部分；
b、使用不同history操作方法到帶hash的頁(yè)面;
c、點(diǎn)擊鏈接跳轉(zhuǎn)到錨點(diǎn)
瀏覽器history的發(fā)展
我們知道在使用location.href、a標(biāo)簽的href[非錨點(diǎn)的方式]等，進(jìn)行頁(yè)面訪問(wèn)時(shí)，頁(yè)面會(huì)刷新。但隨著大前端時(shí)代的到來(lái)，產(chǎn)生了異步單頁(yè)來(lái)提升性能。我們不再希望每次的跳轉(zhuǎn)都帶來(lái)頁(yè)面的刷新，而是希望這種跳轉(zhuǎn)僅僅引發(fā)數(shù)據(jù)變化，從而改變視圖。
此時(shí)，產(chǎn)生了HTML5 history API。這些API，是為了解決異步單頁(yè)的路由問(wèn)題，使得頁(yè)面在不刷新的情況下，帶來(lái)視圖的變化，同時(shí)變化后的信息能得到準(zhǔn)確的傳播。
下面來(lái)看看一個(gè)應(yīng)用場(chǎng)景的實(shí)例：我們?cè)谠L問(wèn)一個(gè)新聞列表頁(yè)，找到一篇感興趣的新聞，文章的內(nèi)容通過(guò)ajax的方式獲取到。我們覺(jué)得這篇文章很有趣，并將其分享給了朋友們。如果url地址沒(méi)有變化，朋友們?cè)L問(wèn)的將是列表頁(yè)，而非有趣的文章。而通過(guò)HTML5的API，在異步請(qǐng)求ajax的同時(shí)，我們可以改變url地址，朋友們?cè)L問(wèn)的也正是這篇文章。
那么，讓我們來(lái)看看window.history是如何工作的吧～～～
瀏覽器history變化與瀏覽器的行為
如圖，展示了初始長(zhǎng)度為4的history棧，在不同操作方法下的變化情況，下面對(duì)每步進(jìn)行分析：
step1～step4：均為history的訪問(wèn)方法，獲取相應(yīng)的歷史記錄中的url；
step5：通過(guò)location.href創(chuàng)建一個(gè)新的url記錄，其將當(dāng)前url2之后的記錄清空，并在其后新增url5；history長(zhǎng)度由4變成3；history的每次新增操作，都會(huì)將其后記錄清空，在其后新增記錄。
step6：通過(guò)pushState方法創(chuàng)建一個(gè)新的url記錄，其也是清空、再新增記錄；
step8：通過(guò)replaceState方法修改一個(gè)url記錄，其不會(huì)產(chǎn)生新記錄，而是將當(dāng)前記錄進(jìn)行修改。
值得注意的是，通過(guò)pushState新增或者修改的history記錄，被訪問(wèn)時(shí)，當(dāng)前頁(yè)面不刷新。而locaiton.href生成的記錄被訪問(wèn)時(shí)，頁(yè)面將進(jìn)行刷新。
Vue router的本質(zhì)
vue router其實(shí)質(zhì)是在HTML5 historyAPI、window.onpopstate、window.onhashchange上做的封裝，通過(guò)一定的規(guī)則映射到對(duì)應(yīng)的方法上，同時(shí)通過(guò)監(jiān)聽(tīng)變化，從而實(shí)現(xiàn)單頁(yè)路由。
本文轉(zhuǎn)自：https://www.cnblogs.com/hity-tt/p/7059192.html
