浅析 vue-router 源码和动态路由权限分配

npm install flow-bin -gflow init

/*@flow*/function add(x: string, y: number): number {  return x + y}add(2, 11)

import Router from 'vue-router'Vue.use(Router)const routes = [   {     path: '/student',    name: 'student',    component: Layout,    meta: { title: '学生信息查询', icon: 'documentation', roles: ['student'] },    children: [      {        path: 'info',        component: () => import('@/views/student/info'),        name: 'studentInfo',        meta: { title: '信息查询', icon: 'form' }      },      {        path: 'score',        component: () => import('@/views/student/score'),        name: 'studentScore',        meta: { title: '成绩查询', icon: 'score' }      }    ]  }  ...];const router = new Router({  mode: "history",  linkActiveClass: "active",  base: process.env.BASE_URL,  routes});new Vue({    router,    store,    render: h => h(App)}).$mount("#app");

export function initUse (Vue: GlobalAPI) {  Vue.use = function (plugin: Function | Object) {    // 拿到 installPlugins     const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))    // 保证不会重复注册    if (installedPlugins.indexOf(plugin) > -1) {      return this    }    // 获取第一个参数 plugins 以外的参数    const args = toArray(arguments, 1)    // 将 Vue 实例添加到参数    args.unshift(this)    // 执行 plugin 的 install 方法 每个 insatll 方法的第一个参数都会变成 Vue，不需要额外引入    if (typeof plugin.install === 'function') {      plugin.install.apply(plugin, args)    } else if (typeof plugin === 'function') {      plugin.apply(null, args)    }    // 最后用 installPlugins 保存     installedPlugins.push(plugin)    return this  }}

// 保存 Vue 的局部变量export let _Vueexport function install (Vue) {  // 如果已安装  if (install.installed && _Vue === Vue) return  install.installed = true // 局部变量保留传入的 Vue  _Vue = Vue  const isDef = v => v !== undefined  const registerInstance = (vm, callVal) => {    let i = vm.$options._parentVnode    if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {      i(vm, callVal)    }  }  // 全局混入钩子函数 每个组件都会有这些钩子函数，执行就会走这里的逻辑  Vue.mixin({    beforeCreate () {      if (isDef(this.$options.router)) {        // new Vue 时传入的根组件 router router对象传入时就可以拿到 this.$options.router        // 根 router        this._routerRoot = this        this._router = this.$options.router        this._router.init(this)        // 变成响应式        Vue.util.defineReactive(this, '_route', this._router.history.current)      } else {        // 非根组件访问根组件通过$parent        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this      }      registerInstance(this, this)    },    destroyed () {      registerInstance(this)    }  })  // 原型加入 $router 和 $route  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  strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created}

  constructor (options: RouterOptions = {}) {    this.app  = null    this.apps = []    // 传入的配置项    this.options = options    this.beforeHooks = []    this.resolveHooks = []    this.afterHooks = []    this.matcher = createMatcher(options.routes || [], this)    // 一般分两种模式 hash 和 history 路由 第三种是抽象模式    let mode = options.mode || 'hash'    // 判断当前传入的配置是否能使用 history 模式    this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false    // 降级处理    if (this.fallback) {      mode = 'hash'    }    if (!inBrowser) {      mode = 'abstract'    }    this.mode = mode    // 根据模式实例化不同的 history,history 对象会对路由进行管理 继承于history class    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}`)        }    }  }

init (app: any) {  ...  this.apps.push(app)  // 确保后面的逻辑只走一次  if (this.app) {    return  }  // 保存 Vue 实例  this.app = app  const history = this.history  // 拿到 history 实例之后，调用 transitionTo 进行路由过渡  if (history instanceof HTML5History) {    history.transitionTo(history.getCurrentLocation())  } else if (history instanceof HashHistory) {    const setupHashListener = () => {      history.setupListeners()    }    history.transitionTo(      history.getCurrentLocation(),      setupHashListener,      setupHashListener    )  }}

 this.matcher = createMatcher(options.routes || [], this)

export function createMatcher (  routes: Array<RouteConfig>,  router: VueRouter): Matcher {  // 创建映射表  const { pathList, pathMap, nameMap } = createRouteMap(routes)  // 添加动态路由  function addRoutes(routes){...}  // 计算新路径  function match (    raw: RawLocation,    currentRoute?: Route,    redirectedFrom?: Location  ): Route {...}  // ... 后面的一些方法暂不展开     return {    match,    addRoutes  }}

export function createRouteMap (  routes: Array<RouteConfig>,  oldPathList?: Array<string>,  oldPathMap?: Dictionary<RouteRecord>,  oldNameMap?: Dictionary<RouteRecord>): {  pathList: Array<string>,  pathMap: Dictionary<RouteRecord>,  nameMap: Dictionary<RouteRecord>} {  // 记录所有的 path  const pathList: Array<string> = oldPathList || []  // 记录 path-RouteRecord 的 Map  const pathMap: Dictionary<RouteRecord> = oldPathMap || Object.create(null)   // 记录 name-RouteRecord 的 Map  const nameMap: Dictionary<RouteRecord> = oldNameMap || Object.create(null)  // 遍历所有的 route 生成对应映射表  routes.forEach(route => {    addRouteRecord(pathList, pathMap, nameMap, route)  })  // 调整优先级  for (let i = 0, l = pathList.length; i < l; i++) {    if (pathList[i] === '*') {      pathList.push(pathList.splice(i, 1)[0])      l--      i--    }  }  return {    pathList,    pathMap,    nameMap  }}

// 解析路径const pathToRegexpOptions: PathToRegexpOptions =    route.pathToRegexpOptions || {}// 拼接路径const normalizedPath = normalizePath(path, parent, pathToRegexpOptions.strict)// 记录路由信息的关键对象，后续会依此建立映射表const record: RouteRecord = {  path: normalizedPath,  regex: compileRouteRegex(normalizedPath, pathToRegexpOptions),  // route 对应的组件  components: route.components || { default: route.component },  // 组件实例  instances: {},  name,  parent,  matchAs,  redirect: route.redirect,  beforeEnter: route.beforeEnter,  meta: route.meta || {},  props: route.props == null    ? {}    : route.components      ? route.props      : { default: route.props }}

 // 如果有 children 递归调用 addRouteRecord    route.children.forEach(child => {      const childMatchAs = matchAs        ? cleanPath(`${matchAs}/${child.path}`)        : undefined      addRouteRecord(pathList, pathMap, nameMap, child, record, childMatchAs)    })

  if (!pathMap[record.path]) {    pathList.push(record.path)    pathMap[record.path] = record  }

function addRoutes (routes) {  createRouteMap(routes, pathList, pathMap, nameMap)}

return {    match,    addRoutes  }

function match (  raw: RawLocation,  currentRoute?: Route,  redirectedFrom?: Location): Route {  ...}