Vue Router的原理及history模式源碼實現


Hash 模式

URL中 # 后面的內容作為路徑地址,可以通過location.url直接切換路由地址,如果只改變了#后面的內容,瀏覽器不會向服務器請求這個地址,

會把這個地址記錄到瀏覽器的訪問歷史中,當hash發生改變之后會觸發hashchange事件,在hashchange事件中記錄當前的路由地址,並找到

該路徑對應的組件並重新渲染。

History 模式

History模式就是一個普通的url,通過history.pushState()方法僅僅改變地址欄,並把地址欄中的地址添加到訪問歷史中,通過監聽popstate

事件可以監聽瀏覽器數據的變化,此時不會向服務器發送請求,只有當刷新頁面或者點擊瀏覽器前進后退按鈕的時候該事件才會被觸發向

瀏覽器發送請求。

VueRouter的模擬實現分析

 

上圖中為vuerouter前端調用的核心代碼,Vue.use方法可以傳入函數或者對象,如果傳入函數Vue.use會調用這個函數,

如果傳入對象的話,Vue.use會調用里面的install方法,VueRouter是個對象,所以后續要實現一個install方法。router為new

VueRouter一個對象實例,所以VueRouter為一個構造函數或者一個類,我們以類的方式來實現,VueRouter這個類里面有

個靜態的install方法,里面傳入了一個對象的形式,里面傳入了路由的路徑及對應的組件,然后在main.js中創建Vue實例,

傳入router對象。

上圖為VueRouter的類圖,有了這個類圖,下面我們要做的就是實現類中的屬性和方法。這個類圖有三部分,最上面是類的名字VueRouter,

第二部分是類的屬性,第三部分是類的方法。其中第二部分options屬性的作用為記錄構造函數中傳入的對象,routerMap用來記錄路由

地址和組件的對應關系,會把路由規則解析到RouterMap中來(后續代碼解析),data是一個對象,里面有一個屬性current,用來記錄

路由地址,設置data的目的是我們需要一個響應式的對象,因為路由地址發生改變,對應的組件要更新。第三部分對應的方法,前面+號

是對外公開的方法,_是靜態的方法。_install就是靜態方法,它是實現vue的插件機制,Constructor初始化VueRouter中的屬性,init把不

同的代碼分割到不同的方法中實現,調用上圖中init方法下面的三個方法,initEvent方法監聽瀏覽器歷史的變化,CreateRouteMap方法初

始化routerMap屬性的,把構造函數中傳入的路由規則轉化為鍵值對的形式存儲到RouteMap中。initComponents這個方法是用來創建

router-link和router-view這兩個組件的。

一.VueRouter中的靜態方法install

首先,install方法要做3件事情:

1.判斷當前插件是否已經被安裝,如果已經安裝則return

2.把Vue構造函數記錄到全局變量

3.把創建Vue實例時候傳入的router對象注入到Vue實例上

二.VueRouter構造函數 

Constructor構造函數接收一個參數options,是一個對象,要初始化3個屬性,options,data,routeMap。

三.createRouteMap方法實現

作用是將構造函數中傳入過來的Options中的路由規則轉化成鍵值對的形式傳入到routeMap中去.

四.initComponents方法實現

創建router-link和router-view組件,首先要說下Vue的構建版本分為運行時版本和完整版,運行時版本不支持template模板,需要打包時

候提前編譯完整版本:包含運行時和編譯器,體積比運行時版本大10K左右,程序運行的時候需要把模板轉換成render函數。Vue-cli使

用的是運行時的版本,所以使用template模板會報錯,所以可以把template轉化為render函數。

五.initEvent方法實現

作用:點擊瀏覽器前進和后退,沒有加載對應的組件,所有要處理當歷史發生變化時,要加載對應的組件把它渲染出來。

六.init方法實現

作用:封裝initEvent,initComponents,createRouteMap方法


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM