VueRouter05 實現原理

在vuerouter中提供了兩種模式：

hash模式

history模式

hash模式的基礎是當url的#後的引數改變時瀏覽器不會傳送請求

history模式的基礎是pushstate和replacestate修改瀏覽器的歷史棧後瀏覽器不會立即傳送請求

前端路由是通過改變url，在不重新重新整理整體頁面的情況下，更新頁面檢視。

目前瀏覽器實現這一功能主要通過兩種方式：

利用url中的hash值

利用h5中的history物件

#代表網頁中的位置，其莜面的字元，就是該位置的標誌符號

瀏覽器讀取這個url周，會自動將print位置滾動至可視區域，對應print位置可以通過兩種方法實現：使用錨點或者使用id屬性

#是用來指導瀏覽器動作的，對伺服器端完全無用，http請求中不包括#及後面的內容字元

改變了#後面的部分，都會改變瀏覽器的訪問歷史，使用後退按鈕，就可以回到上乙個位置,這對於ajax應用程式特別有用，可以用不同的#值，表示不同的訪問狀態，然後向使用者給出可以訪問某個狀態的鏈結。

通過window.location.hash可以讀取、寫入頁面的hash值，讀取時，可以用來判斷網頁狀態是否改變；寫入時，則會在不過載網頁的前提下，創造一條訪問歷史記錄。

html5中增加的onhashchange事件，當#發生變化時，就會觸發這個事件

首先構建了hashhistory建構函式，獲取頁面的hash值

然後定義了hashhistory.push()方法，當頁面的hash值發生變化時，會替換window.location.hash，hash的改變會自動新增到瀏覽器的訪問歷史記錄中，檢視的更新是首先通過vue.mixin()方法，全域性註冊乙個混合，定義了響應式的_route屬性，當_route改變時會觸發vue例項的render方法，更新檢視

graph tb
$router.push()-->hashhistory.push()
hashhistory.push()-->history.transitionto()
history.transitionto()-->history.updateroute()

hashhistory.replace()與push()方法不同之處在於，它並不是將新路由新增到瀏覽器訪問歷史棧頂，而是替換掉當前的路由

上面的vuerouter.push()和vuerouter.replace()是可以在vue元件的邏輯**中直接呼叫的，除此之外在瀏覽器中，使用者還可以直接在瀏覽器位址列中輸入改變路由，因此還需要監聽瀏覽器位址列中路由的變化，並具有與通過**呼叫相同的響應行為，在hashhistory中這一功能通過setuplisteners監聽hashchange實現

詳細的原始碼解讀看這篇文章。

history inte***ce是瀏覽器歷史記錄棧提供的介面，通過back()，forward()，go()等方法，我們可以讀取瀏覽器歷史記錄棧的資訊，進行各種跳轉操作。

history.pushstate()和history.replacestate()方法，分別可以新增和修改歷史記錄條目。這些方法通常與window.onpopstate配合使用。

window.history.pushstate(stateobject,title,url)
window.history,replacestate(stateobject,title,url)

pushstate和replacestate兩種方法的共同特點：當呼叫修改瀏覽器歷史棧後，雖然當前url改變了，但瀏覽器不會立即傳送請求該url，這就為單頁應用前端路由，更新檢視但不重新請求頁面提供了基礎。

vuerouter也提供了hsitory模式，利用的是h5中的history物件和事件，只需要在新建vuerouter的例項時傳入mode引數：

const router = new vuerouter()

這種模式下頁面的url就像正常的url，例如

注意：這麼做以後，伺服器就不再返回404錯誤頁面，因為對於所有路徑都會返回index.html檔案。為了避免這種情況，應該在vue應用裡面覆蓋所有的路由情況，然後在給出乙個404頁面。

const router = new vuerouter(
]})

**結構以及更新檢視的邏輯與hash模式基本類似，只不過將對window.location.hash()直接進行賦值window.location.replace()改為了呼叫history.pushstate()和history.replacestate()方法。

一般的需求場景中，hash模式與history模式是差不多的，根據mdn的介紹，呼叫history.pushstate()相比於直接修改hash主要有以下優勢：

pushstate設定的新url可以是與當前url同源的任意url,而hash只可修改#後面的部分，故只可設定與當前同文件的url

pushstate設定的新url可以與當前url一模一樣，這樣也會把記錄新增到棧中，而hash設定的新值必須與原來不一樣才會觸發記錄新增到棧中

pushstate通過stateobject可以新增任意型別的資料記錄中，而hash只可新增短字串

pushstate可額外設定title屬性供後續使用

VueRouter05 實現原理

vue Router實現原理

vue router的理解，以及實現原理

vue router簡單實現

VueRouter05 實現原理

vue Router實現原理

vue router的理解，以及實現原理

vue router簡單實現

相關推薦