VueRouter 源碼深度解析
VueRouter 源碼深度解析
該文章內容節選自團隊的開源項目 InterviewMap。項目目前內容包含了 JS、網絡、瀏覽器相關、性能優化、安全、框架、Git、數據結構、算法等內容,無論是基礎還是進階,亦或是源碼解讀,你都能在本圖譜中得到滿意的答案,希望這個面試圖譜能夠幫助到大家更好的準備面試。
路由原理
在解析源碼前,先來了解下前端路由的實現原理。 前端路由實現起來其實很簡單,本質就是監聽 URL 的變化,然後匹配路由規則,顯示相應的頁面,並且無須刷新。目前單頁面使用的路由就只有兩種實現方式
- hash 模式
- history 模式
www.test.com/#/
#
後面的哈希值發生變化時,不會向服務器請求數據,可以通過 hashchange
事件來監聽到 URL 的變化,從而進行跳轉頁面。
History 模式是 HTML5 新推出的功能,比之 Hash URL 更加美觀
VueRouter 源碼解析
重要函數思維導圖
以下思維導圖羅列了源碼中重要的一些函數
路由註冊
在開始之前,推薦大家 clone 一份源碼對照著看。因為篇幅較長,函數間的跳轉也很多。
使用路由之前,需要調用 Vue.use(VueRouter)
,這是因為讓插件可以使用 Vue
export function initUse (Vue: GlobalAPI) {
Vue.use = function (plugin: Function | Object) {
// 判斷重復安裝插件
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
const args = toArray(arguments, 1)
// 插入 Vue
args.unshift(this)
// 一般插件都會有一個 install 函數
// 通過該函數讓插件可以使用 Vue
if (typeof plugin.install === ‘function‘) {
plugin.install.apply(plugin, args)
} else if (typeof plugin === ‘function‘) {
plugin.apply(null, args)
}
installedPlugins.push(plugin)
return this
}
}
復制代碼
接下來看下 install
函數的部分實現
export function install (Vue) {
// 確保 install 調用一次
if (install.installed && _Vue === Vue) return
install.installed = true
// 把 Vue 賦值給全局變量
_Vue = Vue
const registerInstance = (vm, callVal) => {
let i = vm.$options._parentVnode
if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
i(vm, callVal)
}
}
// 給每個組件的鉤子函數混入實現
// 可以發現在 `beforeCreate` 鉤子執行時
// 會初始化路由
Vue.mixin({
beforeCreate () {
// 判斷組件是否存在 router 對象,該對象只在根組件上有
if (isDef(this.$options.router)) {
// 根路由設置為自己
this._routerRoot = this
this._router = this.$options.router
// 初始化路由
this._router.init(this)
// 很重要,為 _route 屬性實現雙向綁定
// 觸發組件渲染
Vue.util.defineReactive(this, ‘_route‘, this._router.history.current)
} else {
// 用於 router-view 層級判斷
this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
}
registerInstance(this, this)
},
destroyed () {
registerInstance(this)
}
})
// 全局註冊組件 router-link 和 router-view
Vue.component(‘RouterView‘, View)
Vue.component(‘RouterLink‘, Link)
}
復制代碼
對於路由註冊來說,核心就是調用 Vue.use(VueRouter)
,使得 VueRouter 可以使用 Vue。然後通過 Vue 來調用 VueRouter 的 install
函數。在該函數中,核心就是給組件混入鉤子函數和全局註冊兩個路由組件。
VueRouter 實例化
在安裝插件後,對 VueRouter 進行實例化。
const Home = { template: ‘<div>home</div>‘ }
const Foo = { template: ‘<div>foo</div>‘ }
const Bar = { template: ‘<div>bar</div>‘ }
// 3. Create the router
const router = new VueRouter({
mode: ‘hash‘,
base: __dirname,
routes: [
{ path: ‘/‘, component: Home }, // all paths are defined without the hash.
{ path: ‘/foo‘, component: Foo },
{ path: ‘/bar‘, component: Bar }
]
})
復制代碼
來看一下 VueRouter 的構造函數
constructor(options: RouterOptions = {}) {
// ...
// 路由匹配對象
this.matcher = createMatcher(options.routes || [], this)
// 根據 mode 采取不同的路由方式
let mode = options.mode || ‘hash‘
this.fallback =
mode === ‘history‘ && !supportsPushState && options.fallback !== false
if (this.fallback) {
mode = ‘hash‘
}
if (!inBrowser) {
mode = ‘abstract‘
}
this.mode = mode
switch (mode) {
case ‘history‘:
this.history = new HTML5History(this, options.base)
break
case ‘hash‘:
this.history = new HashHistory(this, options.base, this.fallback)
break
case ‘abstract‘:
this.history = new AbstractHistory(this, options.base)
break
default:
if (process.env.NODE_ENV !== ‘production‘) {
assert(false, `invalid mode: ${mode}`)
}
}
}
復制代碼
在實例化 VueRouter 的過程中,核心是創建一個路由匹配對象,並且根據 mode 來采取不同的路由方式。
創建路由匹配對象
export function createMatcher (
routes: Array<RouteConfig>,
router: VueRouter
): Matcher {
// 創建路由映射表
const { pathList, pathMap, nameMap } = createRouteMap(routes)
function addRoutes (routes) {
createRouteMap(routes, pathList, pathMap, nameMap)
}
// 路由匹配
function match (
raw: RawLocation,
currentRoute?: Route,
redirectedFrom?: Location
): Route {
//...
}
return {
match,
addRoutes
}
}
復制代碼
createMatcher
函數的作用就是創建路由映射表,然後通過閉包的方式讓 addRoutes
和 match
函數能夠使用路由映射表的幾個對象,最後返回一個 Matcher
對象。
接下來看 createMatcher
函數時如何創建映射表的
export function createRouteMap (
routes: Array<RouteConfig>,
oldPathList?: Array<string>,
oldPathMap?: Dictionary<RouteRecord>,
oldNameMap?: Dictionary<RouteRecord>
): {
pathList: Array<string>;
pathMap: Dictionary<RouteRecord>;
nameMap: Dictionary<RouteRecord>;
} {
// 創建映射表
const pathList: Array<string> = oldPathList || []
const pathMap: Dictionary<RouteRecord> = oldPathMap || Object.create(null)
const nameMap: Dictionary<RouteRecord> = oldNameMap || Object.create(null)
// 遍歷路由配置,為每個配置添加路由記錄
routes.forEach(route => {
addRouteRecord(pathList, pathMap, nameMap, route)
})
// 確保通配符在最後
for (let i = 0, l = pathList.length; i < l; i++) {
if (pathList[i] === ‘*‘) {
pathList.push(pathList.splice(i, 1)[0])
l--
i--
}
}
return {
pathList,
pathMap,
nameMap
}
}
// 添加路由記錄
function addRouteRecord (
pathList: Array<string>,
pathMap: Dictionary<RouteRecord>,
nameMap: Dictionary<RouteRecord>,
route: RouteConfig,
parent?: RouteRecord,
matchAs?: string
) {
// 獲得路由配置下的屬性
const { path, name } = route
const pathToRegexpOptions: PathToRegexpOptions = route.pathToRegexpOptions || {}
// 格式化 url,替換 /
const normalizedPath = normalizePath(
path,
parent,
pathToRegexpOptions.strict
)
// 生成記錄對象
const record: RouteRecord = {
path: normalizedPath,
regex: compileRouteRegex(normalizedPath, pathToRegexpOptions),
components: route.components || { default: route.component },
instances: {},
name,
parent,
matchAs,
redirect: route.redirect,
beforeEnter: route.beforeEnter,
meta: route.meta || {},
props: route.props == null
? {}
: route.components
? route.props
: { default: route.props }
}
if (route.children) {
// 遞歸路由配置的 children 屬性,添加路由記錄
route.children.forEach(child => {
const childMatchAs = matchAs
? cleanPath(`${matchAs}/${child.path}`)
: undefined
addRouteRecord(pathList, pathMap, nameMap, child, record, childMatchAs)
})
}
// 如果路由有別名的話
// 給別名也添加路由記錄
if (route.alias !== undefined) {
const aliases = Array.isArray(route.alias)
? route.alias
: [route.alias]
aliases.forEach(alias => {
const aliasRoute = {
path: alias,
children: route.children
}
addRouteRecord(
pathList,
pathMap,
nameMap,
aliasRoute,
parent,
record.path || ‘/‘ // matchAs
)
})
}
// 更新映射表
if (!pathMap[record.path]) {
pathList.push(record.path)
pathMap[record.path] = record
}
// 命名路由添加記錄
if (name) {
if (!nameMap[name]) {
nameMap[name] = record
} else if (process.env.NODE_ENV !== ‘production‘ && !matchAs) {
warn(
false,
`Duplicate named routes definition: ` +
`{ name: "${name}", path: "${record.path}" }`
)
}
}
}
復制代碼
以上就是創建路由匹配對象的全過程,通過用戶配置的路由規則來創建對應的路由映射表。
路由初始化
當根組件調用 beforeCreate
鉤子函數時,會執行以下代碼
beforeCreate () {
// 只有根組件有 router 屬性,所以根組件初始化時會初始化路由
if (isDef(this.$options.router)) {
this._routerRoot = this
this._router = this.$options.router
this._router.init(this)
Vue.util.defineReactive(this, ‘_route‘, this._router.history.current)
} else {
this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
}
registerInstance(this, this)
}
復制代碼
接下來看下路由初始化會做些什麽
init(app: any /* Vue component instance */) {
// 保存組件實例
this.apps.push(app)
// 如果根組件已經有了就返回
if (this.app) {
return
}
this.app = app
// 賦值路由模式
const history = this.history
// 判斷路由模式,以哈希模式為例
if (history instanceof HTML5History) {
history.transitionTo(history.getCurrentLocation())
} else if (history instanceof HashHistory) {
// 添加 hashchange 監聽
const setupHashListener = () => {
history.setupListeners()
}
// 路由跳轉
history.transitionTo(
history.getCurrentLocation(),
setupHashListener,
setupHashListener
)
}
// 該回調會在 transitionTo 中調用
// 對組件的 _route 屬性進行賦值,觸發組件渲染
history.listen(route => {
this.apps.forEach(app => {
app._route = route
})
})
}
復制代碼
在路由初始化時,核心就是進行路由的跳轉,改變 URL 然後渲染對應的組件。接下來來看一下路由是如何進行跳轉的。
路由跳轉
transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
// 獲取匹配的路由信息
const route = this.router.match(location, this.current)
// 確認切換路由
this.confirmTransition(route, () => {
// 以下為切換路由成功或失敗的回調
// 更新路由信息,對組件的 _route 屬性進行賦值,觸發組件渲染
// 調用 afterHooks 中的鉤子函數
this.updateRoute(route)
// 添加 hashchange 監聽
onComplete && onComplete(route)
// 更新 URL
this.ensureURL()
// 只執行一次 ready 回調
if (!this.ready) {
this.ready = true
this.readyCbs.forEach(cb => { cb(route) })
}
}, err => {
// 錯誤處理
if (onAbort) {
onAbort(err)
}
if (err && !this.ready) {
this.ready = true
this.readyErrorCbs.forEach(cb => { cb(err) })
}
})
}
復制代碼
在路由跳轉中,需要先獲取匹配的路由信息,所以先來看下如何獲取匹配的路由信息
function match (
raw: RawLocation,
currentRoute?: Route,
redirectedFrom?: Location
): Route {
// 序列化 url
// 比如對於該 url 來說 /abc?foo=bar&baz=qux#hello
// 會序列化路徑為 /abc
// 哈希為 #hello
// 參數為 foo: ‘bar‘, baz: ‘qux‘
const location = normalizeLocation(raw, currentRoute, false, router)
const { name } = location
// 如果是命名路由,就判斷記錄中是否有該命名路由配置
if (name) {
const record = nameMap[name]
// 沒找到表示沒有匹配的路由
if (!record) return _createRoute(null, location)
const paramNames = record.regex.keys
.filter(key => !key.optional)
.map(key => key.name)
// 參數處理
if (typeof location.params !== ‘object‘) {
location.params = {}
}
if (currentRoute && typeof currentRoute.params === ‘object‘) {
for (const key in currentRoute.params) {
if (!(key in location.params) && paramNames.indexOf(key) > -1) {
location.params[key] = currentRoute.params[key]
}
}
}
if (record) {
location.path = fillParams(record.path, location.params, `named route "${name}"`)
return _createRoute(record, location, redirectedFrom)
}
} else if (location.path) {
// 非命名路由處理
location.params = {}
for (let i = 0; i < pathList.length; i++) {
// 查找記錄
const path = pathList[i]
const record = pathMap[path]
// 如果匹配路由,則創建路由
if (matchRoute(record.regex, location.path, location.params)) {
return _createRoute(record, location, redirectedFrom)
}
}
}
// 沒有匹配的路由
return _createRoute(null, location)
}
復制代碼
接下來看看如何創建路由
// 根據條件創建不同的路由
function _createRoute(
record: ?RouteRecord,
location: Location,
redirectedFrom?: Location
): Route {
if (record && record.redirect) {
return redirect(record, redirectedFrom || location)
}
if (record && record.matchAs) {
return alias(record, location, record.matchAs)
}
return createRoute(record, location, redirectedFrom, router)
}
export function createRoute (
record: ?RouteRecord,
location: Location,
redirectedFrom?: ?Location,
router?: VueRouter
): Route {
const stringifyQuery = router && router.options.stringifyQuery
// 克隆參數
let query: any = location.query || {}
try {
query = clone(query)
} catch (e) {}
// 創建路由對象
const route: Route = {
name: location.name || (record && record.name),
meta: (record && record.meta) || {},
path: location.path || ‘/‘,
hash: location.hash || ‘‘,
query,
params: location.params || {},
fullPath: getFullPath(location, stringifyQuery),
matched: record ? formatMatch(record) : []
}
if (redirectedFrom) {
route.redirectedFrom = getFullPath(redirectedFrom, stringifyQuery)
}
// 讓路由對象不可修改
return Object.freeze(route)
}
// 獲得包含當前路由的所有嵌套路徑片段的路由記錄
// 包含從根路由到當前路由的匹配記錄,從上至下
function formatMatch(record: ?RouteRecord): Array<RouteRecord> {
const res = []
while (record) {
res.unshift(record)
record = record.parent
}
return res
}
復制代碼
至此匹配路由已經完成,我們回到 transitionTo
函數中,接下來執行 confirmTransition
transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
// 確認切換路由
this.confirmTransition(route, () => {}
}
confirmTransition(route: Route, onComplete: Function, onAbort?: Function) {
const current = this.current
// 中斷跳轉路由函數
const abort = err => {
if (isError(err)) {
if (this.errorCbs.length) {
this.errorCbs.forEach(cb => {
cb(err)
})
} else {
warn(false, ‘uncaught error during route navigation:‘)
console.error(err)
}
}
onAbort && onAbort(err)
}
// 如果是相同的路由就不跳轉
if (
isSameRoute(route, current) &&
route.matched.length === current.matched.length
) {
this.ensureURL()
return abort()
}
// 通過對比路由解析出可復用的組件,需要渲染的組件,失活的組件
const { updated, deactivated, activated } = resolveQueue(
this.current.matched,
route.matched
)
function resolveQueue(
current: Array<RouteRecord>,
next: Array<RouteRecord>
): {
updated: Array<RouteRecord>,
activated: Array<RouteRecord>,
deactivated: Array<RouteRecord>
} {
let i
const max = Math.max(current.length, next.length)
for (i = 0; i < max; i++) {
// 當前路由路徑和跳轉路由路徑不同時跳出遍歷
if (current[i] !== next[i]) {
break
}
}
return {
// 可復用的組件對應路由
updated: next.slice(0, i),
// 需要渲染的組件對應路由
activated: next.slice(i),
// 失活的組件對應路由
deactivated: current.slice(i)
}
}
// 導航守衛數組
const queue: Array<?NavigationGuard> = [].concat(
// 失活的組件鉤子
extractLeaveGuards(deactivated),
// 全局 beforeEach 鉤子
this.router.beforeHooks,
// 在當前路由改變,但是該組件被復用時調用
extractUpdateHooks(updated),
// 需要渲染組件 enter 守衛鉤子
activated.map(m => m.beforeEnter),
// 解析異步路由組件
resolveAsyncComponents(activated)
)
// 保存路由
this.pending = route
// 叠代器,用於執行 queue 中的導航守衛鉤子
const iterator = (hook: NavigationGuard, next) => {
// 路由不相等就不跳轉路由
if (this.pending !== route) {
return abort()
}
try {
// 執行鉤子
hook(route, current, (to: any) => {
// 只有執行了鉤子函數中的 next,才會繼續執行下一個鉤子函數
// 否則會暫停跳轉
// 以下邏輯是在判斷 next() 中的傳參
if (to === false || isError(to)) {
// next(false)
this.ensureURL(true)
abort(to)
} else if (
typeof to === ‘string‘ ||
(typeof to === ‘object‘ &&
(typeof to.path === ‘string‘ || typeof to.name === ‘string‘))
) {
// next(‘/‘) 或者 next({ path: ‘/‘ }) -> 重定向
abort()
if (typeof to === ‘object‘ && to.replace) {
this.replace(to)
} else {
this.push(to)
}
} else {
// 這裏執行 next
// 也就是執行下面函數 runQueue 中的 step(index + 1)
next(to)
}
})
} catch (e) {
abort(e)
}
}
// 經典的同步執行異步函數
runQueue(queue, iterator, () => {
const postEnterCbs = []
const isValid = () => this.current === route
// 當所有異步組件加載完成後,會執行這裏的回調,也就是 runQueue 中的 cb()
// 接下來執行 需要渲染組件的導航守衛鉤子
const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid)
const queue = enterGuards.concat(this.router.resolveHooks)
runQueue(queue, iterator, () => {
// 跳轉完成
if (this.pending !== route) {
return abort()
}
this.pending = null
onComplete(route)
if (this.router.app) {
this.router.app.$nextTick(() => {
postEnterCbs.forEach(cb => {
cb()
})
})
}
})
})
}
export function runQueue (queue: Array<?NavigationGuard>, fn: Function, cb: Function) {
const step = index => {
// 隊列中的函數都執行完畢,就執行回調函數
if (index >= queue.length) {
cb()
} else {
if (queue[index]) {
// 執行叠代器,用戶在鉤子函數中執行 next() 回調
// 回調中判斷傳參,沒有問題就執行 next(),也就是 fn 函數中的第二個參數
fn(queue[index], () => {
step(index + 1)
})
} else {
step(index + 1)
}
}
}
// 取出隊列中第一個鉤子函數
step(0)
}
復制代碼
接下來介紹導航守衛
const queue: Array<?NavigationGuard> = [].concat(
// 失活的組件鉤子
extractLeaveGuards(deactivated),
// 全局 beforeEach 鉤子
this.router.beforeHooks,
// 在當前路由改變,但是該組件被復用時調用
extractUpdateHooks(updated),
// 需要渲染組件 enter 守衛鉤子
activated.map(m => m.beforeEnter),
// 解析異步路由組件
resolveAsyncComponents(activated)
)
復制代碼
第一步是先執行失活組件的鉤子函數
function extractLeaveGuards(deactivated: Array<RouteRecord>): Array<?Function> {
// 傳入需要執行的鉤子函數名
return extractGuards(deactivated, ‘beforeRouteLeave‘, bindGuard, true)
}
function extractGuards(
records: Array<RouteRecord>,
name: string,
bind: Function,
reverse?: boolean
): Array<?Function> {
const guards = flatMapComponents(records, (def, instance, match, key) => {
// 找出組件中對應的鉤子函數
const guard = extractGuard(def, name)
if (guard) {
// 給每個鉤子函數添加上下文對象為組件自身
return Array.isArray(guard)
? guard.map(guard => bind(guard, instance, match, key))
: bind(guard, instance, match, key)
}
})
// 數組降維,並且判斷是否需要翻轉數組
// 因為某些鉤子函數需要從子執行到父
return flatten(reverse ? guards.reverse() : guards)
}
export function flatMapComponents (
matched: Array<RouteRecord>,
fn: Function
): Array<?Function> {
// 數組降維
return flatten(matched.map(m => {
// 將組件中的對象傳入回調函數中,獲得鉤子函數數組
return Object.keys(m.components).map(key => fn(
m.components[key],
m.instances[key],
m, key
))
}))
}
復制代碼
第二步執行全局 beforeEach 鉤子函數
beforeEach(fn: Function): Function {
return registerHook(this.beforeHooks, fn)
}
function registerHook(list: Array<any>, fn: Function): Function {
list.push(fn)
return () => {
const i = list.indexOf(fn)
if (i > -1) list.splice(i, 1)
}
}
復制代碼
在 VueRouter 類中有以上代碼,每當給 VueRouter 實例添加 beforeEach 函數時就會將函數 push 進 beforeHooks 中。
第三步執行 beforeRouteUpdate
鉤子函數,調用方式和第一步相同,只是傳入的函數名不同,在該函數中可以訪問到 this
對象。
第四步執行 beforeEnter
鉤子函數,該函數是路由獨享的鉤子函數。
第五步是解析異步組件。
export function resolveAsyncComponents (matched: Array<RouteRecord>): Function {
return (to, from, next) => {
let hasAsync = false
let pending = 0
let error = null
// 該函數作用之前已經介紹過了
flatMapComponents(matched, (def, _, match, key) => {
// 判斷是否是異步組件
if (typeof def === ‘function‘ && def.cid === undefined) {
hasAsync = true
pending++
// 成功回調
// once 函數確保異步組件只加載一次
const resolve = once(resolvedDef => {
if (isESModule(resolvedDef)) {
resolvedDef = resolvedDef.default
}
// 判斷是否是構造函數
// 不是的話通過 Vue 來生成組件構造函數
def.resolved = typeof resolvedDef === ‘function‘
? resolvedDef
: _Vue.extend(resolvedDef)
// 賦值組件
// 如果組件全部解析完畢,繼續下一步
match.components[key] = resolvedDef
pending--
if (pending <= 0) {
next()
}
})
// 失敗回調
const reject = once(reason => {
const msg = `Failed to resolve async component ${key}: ${reason}`
process.env.NODE_ENV !== ‘production‘ && warn(false, msg)
if (!error) {
error = isError(reason)
? reason
: new Error(msg)
next(error)
}
})
let res
try {
// 執行異步組件函數
res = def(resolve, reject)
} catch (e) {
reject(e)
}
if (res) {
// 下載完成執行回調
if (typeof res.then === ‘function‘) {
res.then(resolve, reject)
} else {
const comp = res.component
if (comp && typeof comp.then === ‘function‘) {
comp.then(resolve, reject)
}
}
}
}
})
// 不是異步組件直接下一步
if (!hasAsync) next()
}
}
復制代碼
以上就是第一個 runQueue
中的邏輯,第五步完成後會執行第一個 runQueue
中回調函數
// 該回調用於保存 `beforeRouteEnter` 鉤子中的回調函數
const postEnterCbs = []
const isValid = () => this.current === route
// beforeRouteEnter 導航守衛鉤子
const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid)
// beforeResolve 導航守衛鉤子
const queue = enterGuards.concat(this.router.resolveHooks)
runQueue(queue, iterator, () => {
if (this.pending !== route) {
return abort()
}
this.pending = null
// 這裏會執行 afterEach 導航守衛鉤子
onComplete(route)
if (this.router.app) {
this.router.app.$nextTick(() => {
postEnterCbs.forEach(cb => {
cb()
})
})
}
})
復制代碼
第六步是執行 beforeRouteEnter
導航守衛鉤子,beforeRouteEnter
鉤子不能訪問 this
對象,因為鉤子在導航確認前被調用,需要渲染的組件還沒被創建。但是該鉤子函數是唯一一個支持在回調中獲取 this
對象的函數,回調會在路由確認執行。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通過 `vm` 訪問組件實例
})
}
復制代碼
下面來看看是如何支持在回調中拿到 this
對象的
function extractEnterGuards(
activated: Array<RouteRecord>,
cbs: Array<Function>,
isValid: () => boolean
): Array<?Function> {
// 這裏和之前調用導航守衛基本一致
return extractGuards(
activated,
‘beforeRouteEnter‘,
(guard, _, match, key) => {
return bindEnterGuard(guard, match, key, cbs, isValid)
}
)
}
function bindEnterGuard(
guard: NavigationGuard,
match: RouteRecord,
key: string,
cbs: Array<Function>,
isValid: () => boolean
): NavigationGuard {
return function routeEnterGuard(to, from, next) {
return guard(to, from, cb => {
// 判斷 cb 是否是函數
// 是的話就 push 進 postEnterCbs
next(cb)
if (typeof cb === ‘function‘) {
cbs.push(() => {
// 循環直到拿到組件實例
poll(cb, match.instances, key, isValid)
})
}
})
}
}
// 該函數是為了解決 issus #750
// 當 router-view 外面包裹了 mode 為 out-in 的 transition 組件
// 會在組件初次導航到時獲得不到組件實例對象
function poll(
cb: any, // somehow flow cannot infer this is a function
instances: Object,
key: string,
isValid: () => boolean
) {
if (
instances[key] &&
!instances[key]._isBeingDestroyed // do not reuse being destroyed instance
) {
cb(instances[key])
} else if (isValid()) {
// setTimeout 16ms 作用和 nextTick 基本相同
setTimeout(() => {
poll(cb, instances, key, isValid)
}, 16)
}
}
復制代碼
第七步是執行 beforeResolve
導航守衛鉤子,如果註冊了全局 beforeResolve
鉤子就會在這裏執行。
第八步就是導航確認,調用 afterEach
導航守衛鉤子了。
以上都執行完成後,會觸發組件的渲染
history.listen(route => {
this.apps.forEach(app => {
app._route = route
})
})
復制代碼
以上回調會在 updateRoute
中調用
updateRoute(route: Route) {
const prev = this.current
this.current = route
this.cb && this.cb(route)
this.router.afterHooks.forEach(hook => {
hook && hook(route, prev)
})
}
復制代碼
至此,路由跳轉已經全部分析完畢。核心就是判斷需要跳轉的路由是否存在於記錄中,然後執行各種導航守衛函數,最後完成 URL 的改變和組件的渲染。
VueRouter 源碼深度解析