該文章內容節選自團隊的開源項目 InterviewMap。項目目前內容包含了 JS、網絡、瀏覽器相關、性能優化、安全、框架、Git、數據結構、算法等內容，不管是基礎仍是進階，亦或是源碼解讀，你都能在本圖譜中獲得滿意的答案，但願這個面試圖譜可以幫助到你們更好的準備面試。前端
路由原理
在解析源碼前，先來了解下前端路由的實現原理。 前端路由實現起來其實很簡單，本質就是監聽 URL 的變化，而後匹配路由規則，顯示相應的頁面，而且無須刷新。目前單頁面使用的路由就只有兩種實現方式node
- hash 模式
- history 模式
www.test.com/#/ 就是 Hash URL，當 # 後面的哈希值發生變化時，不會向服務器請求數據，能夠經過 hashchange 事件來監聽到 URL 的變化，從而進行跳轉頁面。git
History 模式是 HTML5 新推出的功能，比之 Hash URL 更加美觀github
VueRouter 源碼解析
重要函數思惟導圖
如下思惟導圖羅列了源碼中重要的一些函數web
路由註冊
在開始以前，推薦你們 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 的改變和組件的渲染。