1. 程式人生 > >Vue路由Hash模式分析

Vue路由Hash模式分析

# Vue路由Hash模式分析 `Vue-router`是`Vue`的核心元件,主要是作為`Vue`的路由管理器,`Vue-router`預設`hash`模式,即使用`URL`的`Hash`來模擬一個完整的`URL`,當`URL`改變時頁面不會重新載入。 ## 描述 `Hash`符號即`#`原本的目的是用來指示`URL`中指示網頁中的位置,例如`https://www.example.com/index.html#print`即代表`example`的`index.html`的`print`位置,瀏覽器讀取這個`URL`後,會自動將`print`位置滾動至可視區域,通常使用``標籤的`name`屬性或者``標籤的`id`屬性指定錨點。 通過`window.location.hash`屬效能夠讀取錨點位置,可以為`Hash`的改變新增`hashchange`監聽事件,每一次改變`Hash`,都會在瀏覽器的訪問歷史中增加一個記錄,此外`Hash`雖然出現在`URL`中,但不會被包括在`HTTP`請求中,即`#`及之後的字元不會被髮送到服務端進行資源或資料的請求,其是用來指導瀏覽器動作的,對伺服器端沒有效果,因此改變`Hash`不會重新載入頁面。 `Vue-router`的作用就是通過改變`URL`,在不重新請求頁面的情況下,更新頁面檢視,從而動態載入與銷燬元件,簡單的說就是,雖然位址列的地址改變了,但是並不是一個全新的頁面,而是之前的頁面某些部分進行了修改,這也是`SPA`單頁應用的特點,其所有的活動侷限於一個`Web`頁面中,非懶載入的頁面僅在該`Web`頁面初始化時載入相應的`HTML`、`JavaScript`、`CSS`檔案,一旦頁面載入完成,`SPA`不會進行頁面的重新載入或跳轉,而是利用`JavaScript`動態的變換`HTML`,預設`Hash`模式是通過錨點實現路由以及控制組件的顯示與隱藏來實現類似於頁面跳轉的互動。 ## 分析 `Vue-router`原始碼的實現比較複雜,會處理各種相容問題與異常以及各種條件分支,文章分析比較核心的程式碼部分,精簡過後的版本,重要部分做出註釋,`commit id`為`560d11d`。 首先是在定義`Router`時呼叫`Vue.use(VueRouter)`,此時會呼叫`VueRouter`類上的靜態方法,即`VueRouter.install = install`,`install`模組主要是保證`Vue-router`只被`use`一次,以及通過`mixin`在`Vue`的生命週期`beforeCreate`內註冊例項,在`destroyed`內銷燬例項,還有定義`$router`與`$route`屬性為只讀屬性以及``與``全域性元件的註冊。 ```javascript // dev/src/install.js line 6 export function install (Vue) { if (install.installed && _Vue === Vue) return install.installed = true // 保證 Vue-router 只被 use 一次 _Vue = Vue const isDef = v => v !== undefined const registerInstance = (vm, callVal) => { let i = vm.$options._parentVnode if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) { i(vm, callVal) } } Vue.mixin({ beforeCreate () { // 註冊例項 if (isDef(this.$options.router)) { // this.$options.router 來自於 VueRouter 的例項化 // 判斷例項是否已經掛載 this._routerRoot = this this._router = this.$options.router this._router.init(this) // // 呼叫 VueRouter 的 init 方法 Vue.util.defineReactive(this, '_route', this._router.history.current) } else { this._routerRoot = (this.$parent && this.$parent._routerRoot) || this // 將元件的 _routerRoot 都指向根 Vue 例項 } registerInstance(this, this) }, destroyed () { // 銷燬例項 即掛載undefined registerInstance(this) } }) Object.defineProperty(Vue.prototype, '$router', { get () { return this._routerRoot._router } }) Object.defineProperty(Vue.prototype, '$route', { get () { return this._routerRoot._route } }) Vue.component('RouterView', View) // 註冊全域性元件 Vue.component('RouterLink', Link) // 註冊全域性元件 const strats = Vue.config.optionMergeStrategies // use the same hook merging strategy for route hooks strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created } ``` 之後是`VueRouter`物件的建構函式,主要是先獲取`mode`的值,如果`mode`的值為`history`但是瀏覽器不支援`history`模式,那麼就強制設定`mode`值為`hash`,接下來根據`mode`的值,來選擇`vue-router`使用哪種模式。 ```javascript // dev/src/index.js line 40 constructor (options: RouterOptions = {}) { this.app = null this.apps = [] this.options = options this.beforeHooks = [] this.resolveHooks = [] this.afterHooks = [] this.matcher = createMatcher(options.routes || [], this) // 建立路由匹配物件 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) // 例項化Hash模式 break case 'abstract': this.history = new AbstractHistory(this, options.base) break default: if (process.env.NODE_ENV !== 'production') { assert(false, `invalid mode: ${mode}`) } } } ``` 在建構函式中呼叫了建立路由匹配物件的方法`createMatcher`,而在`createMatcher`中又呼叫了實際用以建立路由對映表的方法`createRouteMap`,可以說`createMatcher`函式的作用就是建立路由對映表,然後通過閉包的方式讓`addRoutes`和`match`函式能夠使用路由對映表的幾個物件,最後返回一個`Matcher`物件。 ```javascript // dev/src/create-matcher.js line 16 export function createMatcher ( routes: Array, 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 { const location = normalizeLocation(raw, currentRoute, false, router) // location 是一個物件,類似於 {"_normalized":true,"path":"/","query":{},"hash":""} const { name } = location if (name) { // 如果有路由名稱 就進行nameMap對映 const record = nameMap[name] // nameMap[name] = 路由記錄 if (process.env.NODE_ENV !== 'production') { warn(record, `Route with name '${name}' does not exist`) } 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] } } } location.path = fillParams(record.path, location.params, `named route "${name}"`) return _createRoute(record, location, redirectedFrom) } else if (location.path) { // 如果路由配置了path,到pathList和PathMap裡匹配到路由記錄 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) } } } // no match return _createRoute(null, location) } function redirect ( // 處理重定向 record: RouteRecord, location: Location ): Route { const originalRedirect = record.redirect let redirect = typeof originalRedirect === 'function' ? originalRedirect(createRoute(record, location, null, router)) : originalRedirect if (typeof redirect === 'string') { redirect = { path: redirect } } if (!redirect || typeof redirect !== 'object') { if (process.env.NODE_ENV !== 'production') { warn( false, `invalid redirect option: ${JSON.stringify(redirect)}` ) } return _createRoute(null, location) } const re: Object = redirect const { name, path } = re let { query, hash, params } = location query = re.hasOwnProperty('query') ? re.query : query hash = re.hasOwnProperty('hash') ? re.hash : hash params = re.hasOwnProperty('params') ? re.params : params if (name) { // resolved named direct const targetRecord = nameMap[name] if (process.env.NODE_ENV !== 'production') { assert(targetRecord, `redirect failed: named route "${name}" not found.`) } return match({ _normalized: true, name, query, hash, params }, undefined, location) } else if (path) { // 1. resolve relative redirect const rawPath = resolveRecordPath(path, record) // 2. resolve params const resolvedPath = fillParams(rawPath, params, `redirect route with path "${rawPath}"`) // 3. rematch with existing query and hash return match({ _normalized: true, path: resolvedPath, query, hash }, undefined, location) } else { if (process.env.NODE_ENV !== 'production') { warn(false, `invalid redirect option: ${JSON.stringify(redirect)}`) } return _createRoute(null, location) } } function alias ( // 處理別名 record: RouteRecord, location: Location, matchAs: string ): Route { const aliasedPath = fillParams(matchAs, location.params, `aliased route with path "${matchAs}"`) const aliasedMatch = match({ _normalized: true, path: aliasedPath }) if (aliasedMatch) { const matched = aliasedMatch.matched const aliasedRecord = matched[matched.length - 1] location.params = aliasedMatch.params return _createRoute(aliasedRecord, location) } 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) // 建立路由物件 } return { match, addRoutes } } // dev/src/create-route-map.js line 7 export function createRouteMap ( routes: Array, oldPathList?: Array, oldPathMap?: Dictionary, oldNameMap?: Dictionary ): { pathList: Array, pathMap: Dictionary, nameMap: Dictionary } { // the path list is used to control path matching priority const pathList: Array = oldPathList || [] // 建立對映表 // $flow-disable-line const pathMap: Dictionary = oldPathMap || Object.create(null) // $flow-disable-line const nameMap: Dictionary = oldNameMap || Object.create(null) routes.forEach(route => { // 遍歷路由配置,為每個配置新增路由記錄 addRouteRecord(pathList, pathMap, nameMap, route) }) // ensure wildcard routes are always at the end for (let i = 0, l = pathList.length; i < l; i++) { // 確保萬用字元在最後 if (pathList[i] === '*') { pathList.push(pathList.splice(i, 1)[0]) l-- i-- } } if (process.env.NODE_ENV === 'development') { // warn if routes do not include leading slashes const found = pathList // check for missing leading slash .filter(path =>
path && path.charAt(0) !== '*' && path.charAt(0) !== '/') if (found.length > 0) { const pathNames = found.map(path => `- ${path}`).join('\n') warn(false, `Non-nested routes must include a leading slash character. Fix the following routes: \n${pathNames}`) } } return { pathList, pathMap, nameMap } } function addRouteRecord ( // 新增路由記錄 pathList: Array, pathMap: Dictionary, nameMap: Dictionary, route: RouteConfig, parent?: RouteRecord, matchAs?: string ) { const { path, name } = route // 獲得路由配置下的屬性 if (process.env.NODE_ENV !== 'production') { assert(path != null, `"path" is required in a route configuration.`) assert( typeof route.component !== 'string', `route config "component" for path: ${String( path || name )} cannot be a ` + `string id. Use an actual component instead.` ) } const pathToRegexpOptions: PathToRegexpOptions = route.pathToRegexpOptions || {} const normalizedPath = normalizePath(path, parent, pathToRegexpOptions.strict) if (typeof route.caseSensitive === 'boolean') { pathToRegexpOptions.sensitive = route.caseSensitive } 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) { // Warn if route is named, does not redirect and has a default child route. // If users navigate to this route by name, the default child will // not be rendered (GH Issue #629) if (process.env.NODE_ENV !== 'production') { if ( route.name && !route.redirect && route.children.some(child => /^\/?$/.test(child.path)) ) { warn( false, `Named Route '${route.name}' has a default child route. ` + `When navigating to this named route (:to="{name: '${ route.name }'"), ` + `the default child route will not be rendered. Remove the name from ` + `this route and use the name of the default child route for named ` + `links instead.` ) } } route.children.forEach(child => { // 遞迴路由配置的 children 屬性,新增路由記錄 const childMatchAs = matchAs ? cleanPath(`${matchAs}/${child.path}`) : undefined addRouteRecord(pathList, pathMap, nameMap, child, record, childMatchAs) }) } if (!pathMap[record.path]) { // 如果有多個相同的路徑,只有第一個起作用,後面的會被忽略 pathList.push(record.path) pathMap[record.path] = record } if (route.alias !== undefined) { // 如果路由有別名的話,給別名也新增路由記錄 const aliases = Array.isArray(route.alias) ? route.alias : [route.alias] for (let i = 0; i < aliases.length; ++i) { const alias = aliases[i] if (process.env.NODE_ENV !== 'production' && alias === path) { warn( false, `Found an alias with the same value as the path: "${path}". You have to remove that alias. It will be ignored in development.` ) // skip in dev to make it work continue } const aliasRoute = { path: alias, children: route.children } addRouteRecord( pathList, pathMap, nameMap, aliasRoute, parent, record.path || '/' // matchAs ) } } 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}" }` ) } } } ``` 在上文的建構函式中例項化的`HashHistory`物件就是對於`Hash`模式下的路由的處理,主要是通過繼承`History`物件以及自身實現的方法完成路由,以及針對於不支援`history api`的相容處理,以及保證預設進入的時候對應的`Hash`值是以`/`開頭的,如果不是則替換。在初始化`VueRouter`時呼叫的`init`方法呼叫了路由切換以及呼叫了`setupListeners`方法實現了路由的切換的監聽回撥,注意此時並沒有在`HashHistory`物件的建構函式中直接新增事件監聽,這是為了修復`vuejs/vue-router#725`的問題,簡要來說就是說如果在`beforeEnter`這樣的鉤子函式中是非同步的話,`beforeEnter`鉤子就會被觸發兩次,原因是因為在初始化的時候如果此時的`hash`值不是以`/`開頭的話就會補上`#/`,這個過程會觸發`hashchange`事件,所以會再走一次生命週期鉤子,也就意味著會再次呼叫`beforeEnter`鉤子函式。 ```javascript // dev/src/index.js line 21 export default class VueRouter { //... init (app: any /* Vue component instance */) { process.env.NODE_ENV !== 'production' && assert( install.installed, `not installed. Make sure to call \`Vue.use(VueRouter)\` ` + `before creating root instance.` ) this.apps.push(app) // set up app destroyed handler // https://github.com/vuejs/vue-router/issues/2639 app.$once('hook:destroyed', () =>
{ // clean out app from this.apps array once destroyed const index = this.apps.indexOf(app) if (index > -1) this.apps.splice(index, 1) // ensure we still have a main app or null if no apps // we do not release the router so it can be reused if (this.app === app) this.app = this.apps[0] || null if (!this.app) this.history.teardown() }) // main app previously initialized // return as we don't need to set up new history listener if (this.app) { return } this.app = app const history = this.history if (history instanceof HTML5History || history instanceof HashHistory) { const handleInitialScroll = routeOrError =>
{ const from = history.current const expectScroll = this.options.scrollBehavior const supportsScroll = supportsPushState && expectScroll if (supportsScroll && 'fullPath' in routeOrError) { handleScroll(this, routeOrError, from, false) } } const setupListeners = routeOrError => { history.setupListeners() // 初始化新增事件監聽 handleInitialScroll(routeOrError) } history.transitionTo( // 如果預設頁,需要根據當前瀏覽器位址列裡的 path 或者 hash 來啟用對應的路由 history.getCurrentLocation(), setupListeners, setupListeners ) } history.listen(route => { this.apps.forEach(app => { app._route = route }) }) } //... } // dev/src/history/base.js line 24 export class History { // ... transitionTo ( location: RawLocation, onComplete?: Function, onAbort?: Function ) { let route // catch redirect option https://github.com/vuejs/vue-router/issues/3201 try { route = this.router.match(location, this.current) // // 獲取匹配的路由資訊 } catch (e) { this.errorCbs.forEach(cb => { cb(e) }) // Exception should still be thrown throw e } const prev = this.current this.confirmTransition( // 確認跳轉 route, () => { this.updateRoute(route) // 更新當前 route 物件 onComplete && onComplete(route) this.ensureURL() // 子類實現的更新url地址 對於 hash 模式的話 就是更新 hash 的值 this.router.afterHooks.forEach(hook => { hook && hook(route, prev) }) // fire ready cbs once if (!this.ready) { this.ready = true this.readyCbs.forEach(cb => { cb(route) }) } }, err => { if (onAbort) { onAbort(err) } if (err && !this.ready) { // Initial redirection should not mark the history as ready yet // because it's triggered by the redirection instead // https://github.com/vuejs/vue-router/issues/3225 // https://github.com/vuejs/vue-router/issues/3331 if (!isNavigationFailure(err, NavigationFailureType.redirected) || prev !== START) { this.ready = true this.readyErrorCbs.forEach(cb => { cb(err) }) } } } ) } confirmTransition (route: Route, onComplete: Function, onAbort?: Function) { const current = this.current this.pending = route const abort = err => { // changed after adding errors with // https://github.com/vuejs/vue-router/pull/3047 before that change, // redirect and aborted navigation would produce an err == null if (!isNavigationFailure(err) && 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) } const lastRouteIndex = route.matched.length - 1 const lastCurrentIndex = current.matched.length - 1 if ( isSameRoute(route, current) && // 如果是相同的路由就不跳轉 // in the case the route map has been dynamically appended to lastRouteIndex === lastCurrentIndex && route.matched[lastRouteIndex] === current.matched[lastCurrentIndex] ) { this.ensureURL() return abort(createNavigationDuplicatedError(current, route)) } const { updated, deactivated, activated } = resolveQueue( // 通過對比路由解析出可複用的元件,需要渲染的元件,失活的元件 this.current.matched, route.matched ) const queue: Array = [].concat( // 導航守衛陣列 // in-component leave guards extractLeaveGuards(deactivated), // 失活的元件鉤子 // global before hooks this.router.beforeHooks, // 全域性 beforeEach 鉤子 // in-component update hooks extractUpdateHooks(updated), // 在當前路由改變,但是該元件被複用時呼叫 // in-config enter guards activated.map(m => m.beforeEnter), // 需要渲染元件 enter 守衛鉤子 // async components resolveAsyncComponents(activated) // 解析非同步路由元件 ) const iterator = (hook: NavigationGuard, next) => { if (this.pending !== route) { // 路由不相等就不跳轉路由 return abort(createNavigationCancelledError(current, route)) } try { hook(route, current, (to: any) => { // 只有執行了鉤子函式中的next,才會繼續執行下一個鉤子函式,否則會暫停跳轉,以下邏輯是在判斷 next() 中的傳參 if (to === false) { // next(false) -> abort navigation, ensure current URL this.ensureURL(true) abort(createNavigationAbortedError(current, route)) } else if (isError(to)) { this.ensureURL(true) abort(to) } else if ( typeof to === 'string' || (typeof to === 'object' && (typeof to.path === 'string' || typeof to.name === 'string')) ) { // next('/') or next({ path: '/' }) -> redirect abort(createNavigationRedirectedError(current, route)) if (typeof to === 'object' && to.replace) { this.replace(to) } else { this.push(to) } } else { // confirm transition and pass on the value next(to) } }) } catch (e) { abort(e) } } // ... } // ... } // dev/src/history/hash.js line 10 export class HashHistory extends History { constructor (router: Router, base: ?string, fallback: boolean) { super(router, base) // check history fallback deeplinking if (fallback && checkFallback(this.base)) { return } ensureSlash() } // this is delayed until the app mounts // to avoid the hashchange listener being fired too early setupListeners () { // 初始化 這將延遲到mounts生命週期 以避免過早觸發hashchange偵聽器 if (this.listeners.length > 0) { return } const router = this.router const expectScroll = router.options.scrollBehavior const supportsScroll = supportsPushState && expectScroll if (supportsScroll) { this.listeners.push(setupScroll()) } const handleRoutingEvent = () => { const current = this.current if (!ensureSlash()) { return } this.transitionTo(getHash(), route => { if (supportsScroll) { handleScroll(this.router, route, current, true) } if (!supportsPushState) { replaceHash(route.fullPath) } }) } const eventType = supportsPushState ? 'popstate' : 'hashchange' window.addEventListener( eventType, handleRoutingEvent ) this.listeners.push(() => { window.removeEventListener(eventType, handleRoutingEvent) }) } push (location: RawLocation, onComplete?: Function, onAbort?: Function) { const { current: fromRoute } = this this.transitionTo( location, route => { pushHash(route.fullPath) handleScroll(this.router, route, fromRoute, false) onComplete && onComplete(route) }, onAbort ) } replace (location: RawLocation, onComplete?: Function, onAbort?: Function) { const { current: fromRoute } = this this.transitionTo( location, route => { replaceHash(route.fullPath) handleScroll(this.router, route, fromRoute, false) onComplete && onComplete(route) }, onAbort ) } go (n: number) { window.history.go(n) } ensureURL (push?: boolean) { const current = this.current.fullPath if (getHash() !== current) { push ? pushHash(current) : replaceHash(current) } } getCurrentLocation () { return getHash() } } ``` ## 每日一題 ``` https://github.com/WindrunnerMax/EveryDay ``` ## 參考 ``` https://router.vuejs.org/zh/ https://github.com/DDFE/DDFE-blog/issues/9 https://juejin.im/post/6844903647378145294 https://juejin.im/post/6844904062698127367 https://juejin.im/post/6844904018519523335 https://juejin.im/post/6844904012630720526 https://blog.csdn.net/zlingyun/article/details/83536589 https://ustbhuangyi.github.io/vue-analysis/v2/vue-router/install.html#vue-use https://liyucang-git.github.io/2019/08/15/vue-router%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/ ```