前端路由實現方案

前端路由實現方式

HistoryApi

window.history.length

window.history.state

window.history.go([delta])

window.history.back()

window.history.forward()

window.history.pushState(data,title,url)

window.history.replaceState(data,title,url)

咱們只看最後兩個API

/**
*parameters
*@data {object} state對象，這是一個javascript對象，通常是JSON格式的對象
*字面量。
*@title {string} 能夠理解爲document.title，在這裏是做爲新頁面傳入參數的。
*@url {string} 增長或改變的記錄，對應的url，能夠是相對路徑或者絕對路徑，
*url的具體格式能夠自定。
*/

history.pushState(data,title,url) //向瀏覽器歷史棧中增長一條記錄
history.replaceState(data,title,url) //替換歷史棧中的當前記錄
複製代碼

這兩個Api都會操做瀏覽器的歷史棧，而不會引發頁面的刷新。不一樣的是，pushState會增長一條新的歷史記錄，而replaceState則會替換當前的歷史記錄。所需的參數相同，在將新的歷史記錄存入棧後，會把傳入的data（即state對象）同時存入，以便之後調用。同時，這倆api都會更新或者覆蓋當前瀏覽器的title和url爲對應傳入的參數。

url參數能夠爲絕對路徑：www.tonylee.pw/name/tonyle…

也能夠爲相對路徑：?name=tonylee ， /name/tonylee

//假設當前網頁URL爲：http://tonylee.pw
window.history.pushState(null, null, "http://tonylee.pw?name=tonylee");
//url變化：http://tonylee.pw -> http://tonylee.pw?name=tonylee

window.history.pushState(null, null, "http://tonylee.pw/name/tonylee");
//url變化：http://tonylee.pw -> http://tonylee.pw/name/tonylee

window.history.pushState(null, null, "?name=tonylee");
//url變化：http://tonylee.pw -> http://tonylee.pw?name=tonylee

window.history.pushState(null, null, "name=tonylee");
//url變化：http://tonylee.pw -> http://tonylee.pw/name=tonylee

window.history.pushState(null, null, "/name/tonylee");
//url變化：http://tonylee.pw -> http://tonylee.pw/name/tonylee

window.history.pushState(null, null, "name/tonylee");
//url變化：http://tonylee.pw -> http://tonylee.pw/name/tonylee

//錯誤的用法：
window.history.pushState(null, null, "http://www.tonylee.pw?name=tonylee");
//error: 因爲跨域將產生錯誤
能夠看到，url做爲一個改變當前瀏覽器地址的參數，用法是很靈活的，replaceState和pushState具備和上邊測試相同的特性，傳入的url若是可能，總會被作適當的處理，這種處理默以」/」相隔，也能夠本身指定爲」?」等。要注意，這兩個api都是不能跨域的
複製代碼

Url做爲一個改變當前瀏覽器地址的參數，會被作適當的處理，這種處理默以」/」相隔，也能夠本身指定爲」?」等。要注意，這兩個api都是不能跨域的

popstate

當同一個頁面在歷史記錄間切換時，就會產生popstate事件。正常狀況下，若是用戶點擊後退按鈕或者開發者調用：history.back() or history.go()，頁面根本就沒有處理事件的機會，由於這些操做會使得頁面reload。所以popstate只在不會讓瀏覽器頁面刷新的歷史記錄之間切換才能觸發，這些歷史記錄通常由pushState/replaceState或者是由hash錨點等操做產生。而且在事件的句柄中能夠訪問state對象的引用副本！並且單純的調用pushState/replaceState並不會觸發popstate事件。

Hashchange

當頁面hash(#)變化時，即會觸發hashchange。錨點Hash起到引導瀏覽器將此次記錄推入歷史記錄棧頂的做用， window.location 對象處理「#」的改變並不會從新加載頁面，而是將之當成新頁面，放入歷史棧裏。

hash+hashchange 實現

location.hash始終指向頁面url 中#以後的內容

噹噹前頁面的url ='www.baidu.com',能夠在瀏覽器的控制檯輸入location.hash爲空，當頁面指向url ='www.baidu.com/#/hello'的時候，location.hash = '#/hello'。經過讀取location.hash能夠知道當前頁面所處的位置。經過hashchange事件能夠監聽location.hash的變化，從而進行相應的處理便可。

那麼如何觸發hash的改變呢？這裏主要由兩種方法：

1.設置a標籤，href = '#/blue'，當點擊標籤的時候，能夠在當前url的後面增長上'#/blue'，同時觸發hashchange,再回調函數中進行處理。

2.直接在js中對location.hash = '#/blue'便可，此時url會改變，也會觸發hashchange事件。

僅用於我的整理，參考：

前端路由實現方式

淺析Web開發中前端路由實現的幾種方式