外掛程式執行入口:
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鉤子函式執行完畢。
functiongethash ()
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上...