天天百事通！一文聊聊Vue-Router的实现原理

// install.jsimport View from "./components/view"import Link from "./components/link"export let _Vueexport 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 apiexport 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 apifunction pushHash (path) {  if (supportsPushState) {    pushState(getUrl(path))  } else {    window.location.hash = path  }}// 在支持新的history api情况下优先使用history.replaceState实现// 否则使用location apifunction replaceHash (path) {  if (supportsPushState) {    replaceState(getUrl(path))  } else {    window.location.replace(getUrl(path))  }}