vueRouter简记（下）

// router实例
this.router = router
// base的处理
this.base = normalizeBase(base)
// start with a route object that stands for "nowhere"
this.current = START
this.pending = null
this.ready = false
this.readyCbs = []
this.readyErrorCbs = []
this.errorCbs = []
this.listeners = []
复制代码

listen (cb: Function) {
  this.cb = cb
}
复制代码

// transitionTo
let route
// catch redirect option https://github.com/vuejs/vue-router/issues/3201
try {
  route = this.router.match(location, this.current)
}
复制代码

this.confirmTransition(
  route,
  () => {
    // 切换成功后执行的回调函数
    // 更新当前路径即history.current
    // 执行listen中定义的cb
    this.updateRoute(route)
    onComplete && onComplete(route)
    this.ensureURL()
    // 全局后置钩子调用
    this.router.afterHooks.forEach(hook => {
      hook && hook(route, prev)
    })
  }
)
复制代码

const { updated, deactivated, activated } = resolveQueue(
  this.current.matched,
  route.matched
)
复制代码

let i
const max = Math.max(current.length, next.length)
for (i = 0; i < max; i++) {
  if (current[i] !== next[i]) {
    break
  }
}
return {
  updated: next.slice(0, i),
  activated: next.slice(i),
  deactivated: current.slice(i)
}
复制代码

const queue: Array<?NavigationGuard> = [].concat(
  // 实际对应我们守卫的执行顺序
  // 具体的extractLeaveGuards等逻辑就不展开了
  extractLeaveGuards(deactivated),
  this.router.beforeHooks,
  extractUpdateHooks(updated),
  activated.map(m => m.beforeEnter),
  resolveAsyncComponents(activated)
)
复制代码

runQueue(queue, iterator, () => {
  // wait until async components are resolved before
  // extracting in-component enter guards
  const enterGuards = extractEnterGuards(activated)
  const queue = enterGuards.concat(this.router.resolveHooks)
  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(() => {
        handleRouteEntered(route)
      })
    }
  })
})
复制代码

export function runQueue (queue: Array<?NavigationGuard>, fn: Function, cb: Function) {
  const step = index => {
    if (index >= queue.length) {
      cb()
    } else {
      if (queue[index]) {
        // 关键步骤
        // 将step+1作为callBack传递给fn
        // 实际调用next就是执行step(index + 1)
        // 而执行step(index + 1)则是取执行队列的下一步queue[index + 1]来执行
        fn(queue[index], () => {
          step(index + 1)
        })
      } else {
        step(index + 1)
      }
    }
  }
  step(0)
}
复制代码

function formatMatch (record: ?RouteRecord): Array<RouteRecord> {
  const res = []
  while (record) {
    res.unshift(record)
    record = record.parent
  }
  return res
}
复制代码

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
  )
}
复制代码

const eventType = supportsPushState ? 'popstate' : 'hashchange'
window.addEventListener(
  eventType,
  handleRoutingEvent
)
复制代码

const handleRoutingEvent = () => {
  const current = this.current
  if (!ensureSlash()) {
    return
  }
  // 通过getHash获取当前浏览器hash
  this.transitionTo(getHash(), route => {
    if (supportsScroll) {
      handleScroll(this.router, route, current, true)
    }
    if (!supportsPushState) {
      replaceHash(route.fullPath)
    }
  })
}
复制代码

// RouterLink render
const router = this.$router
const current = this.$route
const { location, route, href } = router.resolve(
  this.to,
  current,
  this.append
)
复制代码

// RouterLink render
const handler = e => {
  if (guardEvent(e)) {
    if (this.replace) {
      router.replace(location, noop)
    } else {
      router.push(location, noop)
    }
  }
}
const on = { click: guardEvent }
if (Array.isArray(this.event)) {
  this.event.forEach(e => {
    on[e] = handler
  })
} else {
  on[this.event] = handler
}
复制代码

// RouterLink render
return h(this.tag, data, this.$slots.default)
复制代码

// 首先会定义routerView属性在后面会使用到
data.routerView = true
const h = parent.$createElement
const name = props.name
// 这边值得一说
// 在这里访问了父组件的$route属性
// 实际会访问到installJS中定义的_router属性
// 而_router被定义为响应式数据
// 因此当路由切换时触发的_router修改将导致渲染函数重新执行
// 非常nice的关联
const route = parent.$route
const cache = parent._routerViewCache || (parent._routerViewCache = {})
复制代码

// determine current view depth, also check to see if the tree
// has been toggled inactive but kept-alive.
let depth = 0
let inactive = false
while (parent && parent._routerRoot !== parent) {
  const vnodeData = parent.$vnode ? parent.$vnode.data : {}
  if (vnodeData.routerView) {
    depth++
  }
  if (vnodeData.keepAlive && parent._directInactive && parent._inactive) {
    inactive = true
  }
  parent = parent.$parent
}
data.routerViewDepth = depth
复制代码

const matched = route.matched[depth]
const component = matched && matched.components[name]~
复制代码

return h(component, data, children)
复制代码