一文聊聊Vue-Router的实现原理

// install.js  import View from './components/view' import Link from './components/link'  export let _Vue  export function install (Vue) {   // 不会重复安装   if (install.installed && _Vue === Vue) return   install.installed = true    _Vue = Vue    const isDef = v => v !== undefined    // 为router-view组件关联路由组件   const registerInstance = (vm, callVal) => {     let i = vm.$options._parentVnode     // 调用vm.$options._parentVnode.data.registerRouteInstance方法     // 而这个方法只在router-view组件中存在，router-view组件定义在(../components/view.js @71行)     // 所以，如果vm的父节点为router-view，则为router-view关联当前vm，即将当前vm做为router-view的路由组件     if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {       i(vm, callVal)     }   }    Vue.mixin({     beforeCreate () {       // 这里只会进来一次，因为只有Vue根实例才会有router属性。       if (isDef(this.$options.router)) {         // 所以这里的this就是Vue根实例         this._routerRoot = this         this._router = this.$options.router         this._router.init(this)         // 将 _route 变成响应式         Vue.util.defineReactive(this, '_route', this._router.history.current)       } else {         // 子组件会进入这里，这里也是把Vue根实例保存带_routerRoot属性上         this._routerRoot = (this.$parent && this.$parent._routerRoot) || this       }       // 为router-view组件关联路由组件       registerInstance(this, this)     },     destroyed () {       // destroyed hook触发时，取消router-view和路由组件的关联       registerInstance(this)     }   })    // 在原型上注入$router、$route属性，方便快捷访问   Object.defineProperty(Vue.prototype, '$router', {     // 上面说到每个组件的_routerRoot都是Vue根实例，所以都能访问_router     get () { return this._routerRoot._router }   })    // 每个组件访问到的$route，其实最后访问的都是Vue根实例的_route   Object.defineProperty(Vue.prototype, '$route', {     get () { return this._routerRoot._route }   })    // 注册router-view、router-link两个全局组件   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 }

Vue.mixin({   beforeCreate () {     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)   },   destroyed () {     registerInstance(this)   } })

Object.defineProperty(Vue.prototype, '$router', { get () { return this._routerRoot._router } })  Object.defineProperty(Vue.prototype, '$route', { get () { return this._routerRoot._route } })

init (app: any /* Vue component instance */) {   // ...    this.apps.push(app)    // ...    // 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)       }     }          // 1.setupListeners 里会对 hashchange或popstate事件进行监听     const setupListeners = routeOrError => {       history.setupListeners()       handleInitialScroll(routeOrError)     }     // 2.初始化导航     history.transitionTo(       history.getCurrentLocation(),       setupListeners,       setupListeners     )   }    // 3.路由全局监听，维护当前的route    // 当路由变化的时候修改app._route的值   // 由于_route是响应式的，所以修改后相应视图会同步更新   history.listen(route => {     this.apps.forEach(app => {       app._route = route     })   }) }

const setupListeners = routeOrError => {   history.setupListeners()   handleInitialScroll(routeOrError) }

history.transitionTo(   history.getCurrentLocation(),   setupListeners,   setupListeners )

history.listen(route => {   this.apps.forEach(app => {     app._route = route   }) })

constructor (options: RouterOptions = {}) {   // ...      // 参数初始化   this.app = null   this.apps = []   this.options = options   this.beforeHooks = []   this.resolveHooks = []   this.afterHooks = []   // 创建matcher   this.matcher = createMatcher(options.routes || [], this)    // 设置默认模式和做不支持 H5 history 的降级处理   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    // 根据不同的 mode 实例化不同的 History 对象   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}`)       }   } }

// src/history/html5.js  ...  export class HTML5History extends History {   _startLocation: string    constructor (router: Router, base: ?string) {     // 调用父类构造函数初始化     super(router, base)      this._startLocation = getLocation(this.base)   }    // 设置监听，主要是监听popstate方法来自动触发transitionTo   setupListeners () {     if (this.listeners.length > 0) {       return     }      const router = this.router     const expectScroll = router.options.scrollBehavior     const supportsScroll = supportsPushState && expectScroll          // 若支持scroll,初始化scroll相关逻辑     if (supportsScroll) {       this.listeners.push(setupScroll())     }      const handleRoutingEvent = () => {       const current = this.current        // 某些浏览器，会在打开页面时触发一次popstate        // 此时如果初始路由是异步路由,就会出现`popstate`先触发,初始路由后解析完成，进而导致route未更新        // 所以需要避免       const location = getLocation(this.base)       if (this.current === START && location === this._startLocation) {         return       }              // 路由地址发生变化，则跳转，如需滚动则在跳转后处理滚动       this.transitionTo(location, route => {         if (supportsScroll) {           handleScroll(router, route, current, true)         }       })     }          // 监听popstate事件     window.addEventListener('popstate', handleRoutingEvent)     this.listeners.push(() => {       window.removeEventListener('popstate', handleRoutingEvent)     })   }    // 可以看到 history模式go方法其实是调用的window.history.go(n)   go (n: number) {     window.history.go(n)   }    // push方法会主动调用transitionTo进行跳转   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方法会主动调用transitionTo进行跳转   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)   } }  export function getLocation (base: string): string {   let path = window.location.pathname   const pathLowerCase = path.toLowerCase()   const baseLowerCase = base.toLowerCase()   // base="/a" shouldn't turn path="/app" into "/a/pp"   // https://github.com/vuejs/vue-router/issues/3555   // so we ensure the trailing slash in the base   if (base && ((pathLowerCase === baseLowerCase) ||     (pathLowerCase.indexOf(cleanPath(baseLowerCase + '/')) === 0))) {     path = path.slice(base.length)   }   return (path || '/') + window.location.search + window.location.hash }

// 可以看到 history模式go方法其实是调用的window.history.go(n) go (n: number) {   window.history.go(n) }  // push、replace调用的是util/push-state.js，里面实现了push和replace方法 // 实现原理也是使用的history api，并且在不支持history api的情况下使用location api  export function pushState (url?: string, replace?: boolean) {   ...   const history = window.history   try {     if (replace) {       const stateCopy = extend({}, history.state)       stateCopy.key = getStateKey()       // 调用的 history.replaceState       history.replaceState(stateCopy, '', url)     } else {       // 调用的 history.pushState       history.pushState({ key: setStateKey(genStateKey()) }, '', url)     }   } catch (e) {     window.location[replace ? 'replace' : 'assign'](url)   } }  export function replaceState (url?: string) {   pushState(url, true) }

//src/history/hash.js  ...  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()   }    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       if (!ensureSlash()) {         return       }       this.transitionTo(getHash(), route => {         if (supportsScroll) {           handleScroll(this.router, route, current, true)         }         if (!supportsPushState) {           replaceHash(route.fullPath)         }       })     }     // 事件优先使用 popstate     // 判断supportsPushState就是通过return window.history && typeof window.history.pushState === 'function'     const eventType = supportsPushState ? 'popstate' : 'hashchange'     window.addEventListener(       eventType,       handleRoutingEvent     )     this.listeners.push(() => {       window.removeEventListener(eventType, handleRoutingEvent)     })   }      // 其实也是优先使用history的pushState方法来实现，不支持再使用location修改hash值   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     )   }    // 其实也是优先使用history的replaceState方法来实现，不支持再使用location修改replace方法   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     )   }    // 也是使用的history go方法   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()   } }  function checkFallback (base) {   const location = getLocation(base)   if (!/^/#/.test(location)) {     window.location.replace(cleanPath(base + '/#' + location))     return true   } }  function ensureSlash (): boolean {   const path = getHash()   if (path.charAt(0) === '/') {     return true   }   replaceHash('/' + path)   return false }  // 获取 # 后面的内容 export function getHash (): string {   // We can't use window.location.hash here because it's not   // consistent across browsers - Firefox will pre-decode it!   let href = window.location.href   const index = href.indexOf('#')   // empty path   if (index < 0) return ''    href = href.slice(index + 1)    return href }  function getUrl (path) {   const href = window.location.href   const i = href.indexOf('#')   const base = i >= 0 ? href.slice(0, i) : href   return `${base}#${path}` }  function pushHash (path) {   if (supportsPushState) {     pushState(getUrl(path))   } else {     window.location.hash = path   } }  function replaceHash (path) {   if (supportsPushState) {     replaceState(getUrl(path))   } else {     window.location.replace(getUrl(path))   } }

// 可以看到 hash 模式go方法其实是调用的window.history.go(n) go (n: number) {   window.history.go(n) }  // 在支持新的history api情况下优先使用history.pushState实现 // 否则使用location api function pushHash (path) {   if (supportsPushState) {     pushState(getUrl(path))   } else {     window.location.hash = path   } }  // 在支持新的history api情况下优先使用history.replaceState实现 // 否则使用location api function replaceHash (path) {   if (supportsPushState) {     replaceState(getUrl(path))   } else {     window.location.replace(getUrl(path))   } }