vue router原始碼隨筆

2022-07-22 04:12:11 字數 2106 閱讀 4701

外掛程式執行入口:

if (inbrowser &&window.vue)

外掛程式給vue物件例項暴露了兩個屬性:

object.defineproperty(vue.prototype, '$router', 

}) //

this._routerroot在beforecreate中定義。

object.defineproperty(vue.prototype, '$route',

})

在new vue的時候,先要new router, 執行vuerouter的建構函式。例項很重要成員為matcher,它是乙個物件,包括match和addroutes兩個方法,同時閉包了,它是把router物件轉換為另外一種格式,很關鍵,看下三個屬性的資料結構。

//

pathlist

["/foo","bar"]

//pathmap

"/bar":

},//

元件例項,初始的時候沒有,在beforecreate鉤子函式registerinstance(this, this)賦值的,它呼叫

//view元件中的data.registerrouteinstance,初始的時候不會呼叫,也就是instance為{}

instances: {},

matchas: undefined

//alias用到

meta: undefined,

name: undefined,

parent: undefined,

path: "/bar",

//route.props == null? {}: route.components? route.props:

props: {},

redirect: undefined

regex: /^\/bar(?:\/(?=$))?$/i}//

namemap

namemap:

}

接下來執行this.history = new hashhistory(this, options.base, this.fallback),呼叫base.js的建構函式和hashhistory的建構函式。其中this為router例項:結構如下:

/*

結構如下:

"options":},}

]},

// 守護導航鉤子函式

"beforehooks":,

"resolvehooks":,

"afterhooks":,

"matcher":{},

"fallback":false,

"mode":"hash"

}*/

執行base.js的建構函式之後新增了幾個屬性:

this.base =normalizebase(base)

//start with a route object that stands for "nowhere"

this.current =start

this.pending = null

this.ready = false

this.readycbs =

this.readyerrorcbs =

this.errorcbs =

this.listeners =

start初始為createroute(null, ),返回乙個不可改變的物件,這個物件就是對路徑的解析完畢之後儲存的路徑的各個部分。

router物件結構如下:

接下來執行checkfallback,初始時base為空字元,checkfallback它把當前的href轉為為/#/,最後執行ensureslash。gethash初始返回為'/',最終vuerouter.beforecreate鉤子函式執行完畢。

function

gethash ()

else href =decodeuri(href)

} else

return

href

}

vue router原始碼解讀

vue router是vue全家桶中的一員。當初學習的時候,因為內容比較簡單,只是匆匆瀏覽了一下文件就開始對照api幹活了,對history mode的實現也僅僅是知道用到了h5的history的方法。這次其實是為了看看vue router是怎麼用roll up打包的,但下下來之後發現 量很少,說白...

vue router原始碼解析(一)

vue router是vue.js官方的路由管理器。它和vue.js的核心深度整合,讓構建單頁面應用變得易如反掌。這裡主要通過閱讀vue router的原始碼,對平時使用較多的一些特性以及功能,理解其背後實現的思路。3.0.2 components 元件 link.js route link的實現 ...

Vue Router原始碼分析之install方法

系列文章 vue router 原始碼學習之我們從api中看些門道 vue router原始碼分析之index.js vue router原始碼分析之install方法 使用過vue的coder都知道,如果想註冊乙個vue的外掛程式,在vue物件上能夠使用的話 並不是綁在vue.prototype上...