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
位置滾動至可視區域,通常使用<a>
標籤的name
屬性或者<div>
標籤的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
屬性為只讀屬性以及<router-view>
與<router-link>
全域性元件的註冊。
// 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) // 註冊全域性元件 <router-view>
Vue.component('RouterLink', Link) // 註冊全域性元件 <router-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
使用哪種模式。
// 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
物件。
// dev/src/create-matcher.js line 16
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 {
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<RouteConfig>,
oldPathList?: Array<string>,
oldPathMap?: Dictionary<RouteRecord>,
oldNameMap?: Dictionary<RouteRecord>
): {
pathList: Array<string>,
pathMap: Dictionary<RouteRecord>,
nameMap: Dictionary<RouteRecord>
} {
// the path list is used to control path matching priority
const pathList: Array<string> = oldPathList || [] // 建立對映表
// $flow-disable-line
const pathMap: Dictionary<RouteRecord> = oldPathMap || Object.create(null)
// $flow-disable-line
const nameMap: Dictionary<RouteRecord> = 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<string>,
pathMap: Dictionary<RouteRecord>,
nameMap: Dictionary<RouteRecord>,
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
鉤子函式。
// 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<?NavigationGuard> = [].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/