【vue-router源码】五、router.addRoute、router.removeRoute、router.hasRoute、router.getRoutes源码分析

【vue-rouer源码】系列文章

1. 【vue-router源码】一、router.install解析
2. 【vue-router源码】二、createWebHistory、createWebHashHistory、createMemoryHistory源码解析
3. 【vue-router源码】三、理解Vue-router中的Matcher
4. 【vue-router源码】四、createRouter源码解析
5. 【vue-router源码】五、router.addRoute、router.removeRoute、router.hasRoute、router.getRoutes源码分析
6. 【vue-router源码】六、router.resolve源码解析
7. 【vue-router源码】七、router.push、router.replace源码解析
8. 【vue-router源码】八、router.go、router.back、router.forward源码解析
9. 【vue-router源码】九、全局导航守卫的实现
10. 【vue-router源码】十、isReady源码解析
11. 【vue-router源码】十一、onBeforeRouteLeave、onBeforeRouteUpdate源码分析
12. 【vue-router源码】十二、useRoute、useRouter、useLink源码分析
13. 【vue-router源码】十三、RouterLink源码分析
14. 【vue-router源码】十四、RouterView源码分析

---

---

前言

【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。该系列文章源码参考vue-router v4.0.15。
源码地址：https://github.com/vuejs/router
阅读该文章的前提是你最好了解vue-router的基本使用，如果你没有使用过的话，可通过vue-router官网学习下。

该篇文章将分析router.addRoute、router.removeRoute、router.hasRoute、router.getRoutes的实现。

使用

• addRoute
  当使用addRoute添加路由时，如果第一个参数为路由name，那么会添加一个嵌套路由；否则添加的是个非嵌套路由。

// 添加非嵌套路由
router.addRoute({ name: 'admin', path: '/admin', component: Admin })
// 添加嵌套路由
router.addRoute('admin', { path: 'settings', component: AdminSettings })

以上代码等同于：

router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
})

• removeRoute

router.removeRoute('admin')

• hasRoute

router.hasRoute('admin')

• getRoutes

router.getRoutes()

addRoute

addRoute可接受两个参数：parentOrRoute（父路由的name或一个新的路由，如果是父路由的name，name第二个参数是必须的）、record（要添加的路由）。返回一个删除新增路由的函数。

function addRoute(
    parentOrRoute: RouteRecordName | RouteRecordRaw,
    route?: RouteRecordRaw
  ) {
    let parent: Parameters<typeof matcher['addRoute']>[1] | undefined
    let record: RouteRecordRaw
    // 如果parentOrRoute是路由名称，parent为parentOrRoute对应的matcher，被添加的route是个嵌套路由
    if (isRouteName(parentOrRoute)) {
      parent = matcher.getRecordMatcher(parentOrRoute)
      record = route!
    } else { // 如果parentOrRoute不是路由名称，parentOrRoute就是要添加的路由
      record = parentOrRoute
    }

    // 调用matcher.addRoute添加新的记录，返回一个移除路由的函数
    return matcher.addRoute(record, parent)
  }

在定义parent时，使用了一个Paramerer<Type>类型，对于该类型的使用可参考https://www.typescriptlang.org/docs/handbook/utility-types.html#parameterstype。在该方法中，parent的类型会取matcher.addRoute方法中的第2个参数的类型。

isRouteName：通过判断name是否为string或symbol类型，来决定是不是routeName。

export function isRouteName(name: any): name is RouteRecordName {
  return typeof name === 'string' || typeof name === 'symbol'
}

removeRoute

删除路由。removeRoute接收一个name（现有路由的名称）参数。

function removeRoute(name: RouteRecordName) {
  // 根据name获取对应的routeRecordMatcher
  const recordMatcher = matcher.getRecordMatcher(name)
  if (recordMatcher) {
    // 如果存在recordMatcher，调用matcher.removeRoute
    matcher.removeRoute(recordMatcher)
  } else if (__DEV__) {
    warn(`Cannot remove non-existent route "${String(name)}"`)
  }
}

hasRoute

用于判断路由是否存在。hasRoute接收一个name字符串，返回一个boolen值。

通过matcher.getRecordMatcher来获取对应的matcher，在matcher.getRecordMatcher会在matcherMap中取寻找对应的matcher，如果没有找到说明路由不存在。

function hasRoute(name: RouteRecordName): boolean {
  return !!matcher.getRecordMatcher(name)
}

getRoutes

获取标准化后的路由列表。标准化后的路由会被存储到matcher.record中。

function getRoutes() {
  // 遍历matchers，routeMatcher.record中存储着路由的标准化版本
  return matcher.getRoutes().map(routeMatcher => routeMatcher.record)
}

总结

router.addRoute、router.removeRoute、router.hasRoute、router.getRoutes几个API全都依赖matcher实现，可见matcher是vue-router的核心，如果你不了解matcher，建议回顾下之前的文章。