VUE-ROUTER源码阅读理解

你的名字 2023-01-06 11:58 150阅读 0赞

> ## VUE-ROUTER注册 ##

主要就是定义获取`$router`和`$route`的方式，然后就是注册`RouterView`和`RouterLink`两个组件，最后定义路由钩子的合并策略。其它还包括配合缓存组件实例。

export function install (Vue) { 
      if (install.installed && _Vue === Vue) return
      install.installed = true
    
      _Vue = Vue
    
      const isDef = v => v !== undefined
    
      const registerInstance = (vm, callVal) => { 
        let i = vm.$options._parentVnode
        // registerRouteInstance 在 src/components/view
        // 用于替换缓存的实例
        if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) { 
          i(vm, callVal)
        }
      }
    
      Vue.mixin({ 
        beforeCreate () { 
          // options里有router表示根组件，在根组件中存储router实例
          if (isDef(this.$options.router)) { 
            this._routerRoot = this
            this._router = this.$options.router
            // 在根组件里初始化
            this._router.init(this)
            // 把_route响应式的挂载在根组件实例
            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 }
      })
    
      Vue.component('RouterView', View)
      Vue.component('RouterLink', Link)
    
      const strats = Vue.config.optionMergeStrategies
      // use the same hook merging strategy for route hooks
      // 将组件内的路由钩子用和created一样的合并策略
      strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
    }

#### init ####

init中对根组件的实例缓存，并监听根组件销毁事件，然后监听路由变化事件、popstate事件、滚动事件，并且完成第一次路由跳转。

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)
    
        // 注销后删除当前实例，如果没有实例了则清空监听事件
        app.$once('hook:destroyed', () => { 
          const index = this.apps.indexOf(app)
          if (index > -1) this.apps.splice(index, 1)
          if (this.app === app) this.app = this.apps[0] || null
    
          if (!this.app) { 
            this.history.teardownListeners()
          }
        })
    
        // 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 => { 
            // 会监听hashchange/popstate事件，并记录滚动位置和跳转页面
            history.setupListeners()
            handleInitialScroll(routeOrError)
          }
          // 初始化第一次跳转
          history.transitionTo(
            history.getCurrentLocation(),
            setupListeners,
            setupListeners
          )
        }
    
        history.listen(route => { 
          this.apps.forEach(app => { 
            // 跳转时替换_route触发更新
            app._route = route
          })
        })
      }

> ## VUE-ROUTER实例化 ##

在构造函数中主要解析options.routes，生成相关缓存；初始化mathcer生成match和addRoutes两个API，分别用于解析跳转路由和添加路由；按mode初始化history，用于处理地址解析和相关操作。

constructor (options: RouterOptions = { }) { 
        this.app = null
        this.apps = []
        this.options = options
        this.beforeHooks = []
        this.resolveHooks = []
        this.afterHooks = []
        // 返回match和addRoutes两个API，并解析options.routes
        // match：用于生成$route相关属性
        // addRoutes：添加路由
        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)
            break
          case 'abstract':
            this.history = new AbstractHistory(this, options.base)
            break
          default:
            if (process.env.NODE_ENV !== 'production') { 
              assert(false, `invalid mode: ${ mode}`)
            }
        }
      }

#### createMatcher ####

该方法主要解构routes，转换后存入pathList、pathMap和nameMap中，然后返回match和addRoutes两个API。match主要负责根据地址信息获取$route对象；addRoutes主要负责把路由添加到pathList、pathMap和nameMap中。

type RouteRecord = { 
        path,
        regex,
        components,
        instances,
        name,
        parent,
        matchAs,
        redirect,
        beforeEnter,
        meta,
        props
      }
    function createMatcher (
      routes: Array<RouteConfig>,
      router: VueRouter
    ): Matcher { 
      // pathList: path列表
      // pathMap: 以path为键名且以record: RouteRecord为值的对象
      // nameMap: 以name为键名且以record: RouteRecord为值的对象
      // 将routes里的路由转为RouteRecord类型，并分别展开放入3个变量中
      const {  pathList, pathMap, nameMap } = createRouteMap(routes)
    
      function addRoutes (routes) { 
        createRouteMap(routes, pathList, pathMap, nameMap)
      }
    
      function match (
        raw: RawLocation,
        currentRoute?: Route,
        redirectedFrom?: Location
      ): Route { 
        // 格式化路径等相关参数
        // 如果是按name跳转则浅复制params并直接返回raw
        // 如果没有path只有params，则用当前路由的name，且合并当前路由和raw的params
        // 其它则格式化raw.path，分成path、hash和query
        const location = normalizeLocation(raw, currentRoute, false, router)
        const {  name } = location
    
        if (name) { 
          // 获取匹配路由相关信息（只是当前一级）
          const record = nameMap[name]
          if (process.env.NODE_ENV !== 'production') { 
            warn(record, `Route with name '${ name}' does not exist`)
          }
          if (!record) return _createRoute(null, location)
          // 遍历path-to-regexp库转出来的正则，获取path中的动态参数
          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]
              }
            }
          }
    
          // 根据params生成path
          location.path = fillParams(record.path, location.params, `named route "${ name}"`)
          return _createRoute(record, location, redirectedFrom)
        } else if (location.path) { 
          location.params = { }
          // 通过遍历pathList，获取record，主要是动态path不得不遍历
          for (let i = 0; i < pathList.length; i++) { 
            const path = pathList[i]
            const record = pathMap[path]
            // 将路径中的匹配参数赋值到location.params
            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 { }
    
      // 通过别名路由获取原路由
      // 在解构routes时，对有alias的路由会对alias的路径进行一个简单注册，matchAs表示原路由的path
      function alias (
        record: RouteRecord,
        location: Location,
        matchAs: string
      ): Route { }
    
      
      // 创建一个不可更改的路由对象（和$route一样的对象）
      // 如果没有匹配则创建一个按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
      }
    }

#### HashHistory ####

HTML5History、HashHistory、AbstractHistory这几个类大同小异，所以只分析下HashHistory。该类继承History类，主要定义了几个跳转API和事件监听，跳转API这边主要处理组件替换完成后的逻辑，具体的组件处理逻辑还是在History类中。

class HashHistory extends History { 
      constructor (router: Router, base: ?string, fallback: boolean) { 
        super(router, base)
        // check history fallback deeplinking
        // 如果需要fallback则判断hash部分是否带/#，没带则带上重新跳转
        if (fallback && checkFallback(this.base)) { 
          return
        }
        // 判断hash部分是否以斜杠开头，不是则带上重新跳转
        ensureSlash()
      }
    
      // 初始化时添加滚动监听和跳转监听
      setupListeners () { 
        if (this.listeners.length > 0) { 
          return
        }
    
        const router = this.router
        const expectScroll = router.options.scrollBehavior
        const supportsScroll = supportsPushState && expectScroll
    
        if (supportsScroll) { 
          // setupScroll用于设置滚动行为，并且监听popstate事件并存储滚动位置
          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 => { 
            // push history.state
            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()
      }
    }

#### History ####

History主要是实现了路由替换、钩子触发。transitionTo负责调用match获取$route对象，并在confirmTransition的回调中更新当前路由和触发after钩子；confirmTransition负责组件替换，并且触发销毁组件的beforeRouteLeave、全局的before钩子、重复组件的beforeRouteUpdate钩子、新组件的beforeEnter钩子且加载异步组件，在异步组件加载完毕后还会触发相应钩子。

class History { 
      router: Router
      base: string
      current: Route
      pending: ?Route
      cb: (r: Route) => void
      ready: boolean
      readyCbs: Array<Function>
      readyErrorCbs: Array<Function>
      errorCbs: Array<Function>
      listeners: Array<Function>
      cleanupListeners: Function
    
      constructor (router: Router, base: ?string) { 
        this.router = router
        this.base = normalizeBase(base)
        this.current = START
        this.pending = null
        this.ready = false
        this.readyCbs = []
        this.readyErrorCbs = []
        this.errorCbs = []
        this.listeners = []
      }
    
      // 注册路由更新时的回调
      listen (cb: Function) { 
        this.cb = cb
      }
    
      onReady (cb: Function, errorCb: ?Function) { 
        if (this.ready) { 
          cb()
        } else { 
          this.readyCbs.push(cb)
          if (errorCb) { 
            this.readyErrorCbs.push(errorCb)
          }
        }
      }
    
      onError (errorCb: Function) { 
        this.errorCbs.push(errorCb)
      }
    
      transitionTo (
        location: RawLocation,
        onComplete?: Function,
        onAbort?: Function
      ) { 
        let route
        try { 
          // 获取匹配的路由信息
          route = this.router.match(location, this.current)
        } catch (e) { 
          this.errorCbs.forEach(cb => { 
            cb(e)
          })
          // Exception should still be thrown
          throw e
        }
        // 调用钩子
        this.confirmTransition(
          route,
          () => { 
            const prev = this.current
            this.updateRoute(route)
            onComplete && onComplete(route)
            this.ensureURL()
            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) { 
              this.ready = true
              // Initial redirection should still trigger the onReady onSuccess
              // https://github.com/vuejs/vue-router/issues/3225
              if (!isNavigationFailure(err, NavigationFailureType.redirected)) { 
                this.readyErrorCbs.forEach(cb => { 
                  cb(err)
                })
              } else { 
                this.readyCbs.forEach(cb => { 
                  cb(route)
                })
              }
            }
          }
        )
      }
    
      confirmTransition (route: Route, onComplete: Function, onAbort?: Function) { 
        const current = this.current
        const abort = err => { 
          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))
        }
    
        // 获取需要更新的，需要销毁的，需要激活的matched
        const {  updated, deactivated, activated } = resolveQueue(
          this.current.matched,
          route.matched
        )
    
        const queue: Array<?NavigationGuard> = [].concat(
          // 获取组件里的beforeRouteLeave守卫
          extractLeaveGuards(deactivated),
          // 全局的before守卫
          this.router.beforeHooks,
          // 获取组件里的beforeRouteUpdate守卫
          extractUpdateHooks(updated),
          // 获取配置里beforeEnter守卫
          activated.map(m => m.beforeEnter),
          // 加载异步组件
          resolveAsyncComponents(activated)
        )
    
        this.pending = route
        const iterator = (hook: NavigationGuard, next) => { 
          if (this.pending !== route) { 
            return abort(createNavigationCancelledError(current, route))
          }
          try { 
            hook(route, current, (to: any) => { 
              if (to === false) { 
                // 如果是false则停止导航
                // next(false) -> abort navigation, ensure current URL
                this.ensureURL(true)
                abort(createNavigationAbortedError(current, route))
              } else if (isError(to)) { 
                // 如果是Error则停止导航
                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 { 
                // 否则继续
                next(to)
              }
            })
          } catch (e) { 
            abort(e)
          }
        }
    
        // 将所有守卫调用一遍，直到被中断或全部执行完
        runQueue(queue, iterator, () => { 
          const postEnterCbs = []
          const isValid = () => this.current === route
          // 获取异步组件的钩子
          const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid)
          const queue = enterGuards.concat(this.router.resolveHooks)
          // 执行异步组件beforeRouteEnter守卫
          runQueue(queue, iterator, () => { 
            if (this.pending !== route) { 
              return abort(createNavigationCancelledError(current, route))
            }
            this.pending = null
            onComplete(route)
            if (this.router.app) { 
              this.router.app.$nextTick(() => { 
                postEnterCbs.forEach(cb => { 
                  cb()
                })
              })
            }
          })
        })
      }
    
      // 更新路由对象
      updateRoute (route: Route) { 
        this.current = route
        this.cb && this.cb(route)
      }
    
      setupListeners () { 
        // Default implementation is empty
      }
    
      // 清空监听事件
      teardownListeners () { 
        this.listeners.forEach(cleanupListener => { 
          cleanupListener()
        })
        this.listeners = []
      }
    }

> ## ROUTER-VIEW ##

router-view负责渲染组件和缓存组件实例。

export default { 
      name: 'RouterView',
      functional: true,
      props: { 
        name: { 
          type: String,
          default: 'default'
        }
      },
      render (_, {  props, children, parent, data }) { 
        // 标记该组件是routerView渲染
        data.routerView = true
    
        const h = parent.$createElement
        const name = props.name
        const route = parent.$route
        const cache = parent._routerViewCache || (parent._routerViewCache = { })
    
        let depth = 0
        // 标识祖先组件是否是从缓存中读取的
        let inactive = false
        while (parent && parent._routerRoot !== parent) { 
          const vnodeData = parent.$vnode ? parent.$vnode.data : { }
          if (vnodeData.routerView) { 
            depth++
          }
          // 判断是否是需要缓存的组件（既keep-alive包裹且缓存的组件）且已经冻结（缓存）
          if (vnodeData.keepAlive && parent._directInactive && parent._inactive) { 
            inactive = true
          }
          parent = parent.$parent
        }
        // 缓存当前组件深度
        data.routerViewDepth = depth
    
        // 如果要渲染的组件的祖先组件是需要缓存的组件且被冻结了，则渲染缓存组件
        // 因为冻结子路由在$route变化时也会更新，所以渲染缓存组件（keep-alive缓存的组件在相关响应式更新时也会触发更新）
        if (inactive) { 
          const cachedData = cache[name]
          const cachedComponent = cachedData && cachedData.component
          if (cachedComponent) { 
            if (cachedData.configProps) { 
              // 把props填充到组件的data中
              fillPropsinData(cachedComponent, data, cachedData.route, cachedData.configProps)
            }
            return h(cachedComponent, data, children)
          } else { 
            return h()
          }
        }
    
        const matched = route.matched[depth]
        const component = matched && matched.components[name]
    
        // render empty node if no matched route or no config component
        if (!matched || !component) { 
          cache[name] = null
          return h()
        }
    
        // cache component
        cache[name] = {  component }
    
       // 在beforeCreate中调用
        data.registerRouteInstance = (vm, val) => { 
          // val could be undefined for unregistration
          const current = matched.instances[name]
          if (
            (val && current !== vm) ||
            (!val && current === vm)
          ) { 
            matched.instances[name] = val
          }
        }
    
        // 在prepatch钩子中注册实例
        ;(data.hook || (data.hook = { })).prepatch = (_, vnode) => { 
          matched.instances[name] = vnode.componentInstance
        }
    
        // 在init钩子中注册实例，仅当缓存的组件被激活
        data.hook.init = (vnode) => { 
          if (vnode.data.keepAlive &&
            vnode.componentInstance &&
            vnode.componentInstance !== matched.instances[name]
          ) { 
            matched.instances[name] = vnode.componentInstance
          }
        }
    
        const configProps = matched.props && matched.props[name]
        if (configProps) { 
          extend(cache[name], { 
            route,
            configProps
          })
          fillPropsinData(component, data, route, configProps)
        }
    
        return h(component, data, children)
      }
    }

> ## 总结 ##

路由跳转流程：

Created with Raphaël 2.2.0API发起跳转或地址栏发生变化解析地址并调用transitionTotransitionTo调用match获取匹配的路由后调用confirmTransitionconfirmTransition会解析出需要更新的组件、即将要激活的组件和要销毁的组件并获取钩子执行钩子和加载并执行异步组件的钩子，这里的钩子可以终止或重定向如果正常执行完则会更新响应式路由对象调用全局的后置钩子，如果是API跳转则还好pushState结束