vue Router實現原理

一、前端路由概念

通過改變 url，在不重新請求頁面的情況下，更新頁面檢視。

二、vue-router兩種模式

更新檢視但不重新請求頁面，是前端路由原理的核心之一，目前在瀏覽器環境中這一功能的實現主要有2種方式：

hash — 預設值，利用 url 中的hash("#") 、

history-- 利用url中的路徑（/home）

mode 區別：

mode:「hash」 多了 「#」

hashhistory 擁有兩個方法，乙個是 push， 乙個是 replace ashhistory.push()

將新路由新增到瀏覽器訪問歷史的棧頂

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

早期history通過back()、forward()、go()等方法，我們可以讀取瀏覽器歷史記錄棧的資訊

從html5開始history提供了2個新的方法：pushstate()、replacestate()

window.history.

pushstate
(data, title, targeturl)
;@狀態物件：傳給目標路由的資訊,可為空
@可選url：目標url，不會檢查url是否存在，且不能跨域。如不傳該項,即給當前url新增data

window.history.

replacestate
(data, title, targeturl)
;@類似於pushstate,但是會直接替換掉當前url,而不會在history中留下記錄

var stateobj =

;history.
pushstate
(stateobj,
'page 2'
,'2.html'
);

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

兩種模式比較

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

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

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

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

history模式則會將url修改得就和正常請求後端的url一樣,如後端沒有配置對應/user/id的路由處理，則會返回404錯誤

VueRouter05 實現原理

在vuerouter中提供了兩種模式 hash模式 history模式 hash模式的基礎是當url的 後的引數改變時瀏覽器不會傳送請求 history模式的基礎是pushstate和replacestate修改瀏覽器的歷史棧後瀏覽器不會立即傳送請求 前端路由是通過改變url，在不重新重新整理整體頁...

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

1早期的前端路由的實現就是基於 location.hash 來實現的。其實現原理很簡單，location.hash 的值就是 url 中 後面的內容。比如下面這個 它的 location.hash 的值為 search html5 提供了 history api 來實現 url 的變化。其中做最主要...

vue router簡單實現

1.構造vuerouter類 constructor options 的形式 this routesmap this createmap this routes 初始化狀態 this history newhistoryroute 初始化路由設定 this init 2.將routes格式轉化為的形...