在上文的构造函数中实例化的HTML5History对象就是对于history模式下的路由的处理，主要是通过继承History对象以及自身实现的方法完成路由。在初始化VueRouter时调用的init方法调用了路由切换以及调用了setupListeners方法实现了路由的切换的监听回调，注意此时并没有在HTML5History对象的构造函数中直接添加事件监听，这是因为需要避免在某些浏览器中调度第一个popstate事件，但是由于异步保护，第一个历史记录路由未同时更新的问题。history模式的代码结构以及更新视图的逻辑与hash模式基本类似，主要是监听popstate事件以及对于push()和replace()方法的变动，使用History对象的pushState()与replaceState()等方法进行路由的变换。
// 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('http://www.likecs.com/') or next({ path: 'http://www.likecs.com/' }) -> 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/html5.js line 10 export class HTML5History extends History { _startLocation: string constructor (router: Router, base: ?string) { super(router, base) this._startLocation = getLocation(this.base) } setupListeners () { // 初始化 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 // Avoiding first `popstate` event dispatched in some browsers but first // history route not updated since async guard at the same time. const location = getLocation(this.base) if (this.current === START && location === this._startLocation) { return } this.transitionTo(location, route => { if (supportsScroll) { handleScroll(router, route, current, true) } }) } window.addEventListener('popstate', handleRoutingEvent) // 事件监听 this.listeners.push(() => { window.removeEventListener('popstate', handleRoutingEvent) }) } go (n: number) { window.history.go(n) } push (location: RawLocation, onComplete?: Function, onAbort?: Function) { const { current: fromRoute } = this this.transitionTo(location, route => { pushState(cleanPath(this.base + 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 => { replaceState(cleanPath(this.base + route.fullPath)) handleScroll(this.router, route, fromRoute, false) onComplete && onComplete(route) }, onAbort) } ensureURL (push?: boolean) { if (getLocation(this.base) !== this.current.fullPath) { const current = cleanPath(this.base + this.current.fullPath) push ? pushState(current) : replaceState(current) } } getCurrentLocation (): string { return getLocation(this.base) } } 每日一题 https://github.com/WindrunnerMax/EveryDay 参考 https://www.jianshu.com/p/557f2ba86892 https://juejin.im/post/6844904159678824456 https://juejin.im/post/6844904012630720526 https://juejin.im/post/6844904062698127367 https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState https://liyucang-git.github.io/2019/08/15/vue-router%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/ https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90