【vue-rouer源码】系列文章

【vue-router源码】一、router.install解析
【vue-router源码】二、createWebHistory、createWebHashHistory、createMemoryHistory源码解析
【vue-router源码】三、理解Vue-router中的Matcher
【vue-router源码】四、createRouter源码解析
【vue-router源码】五、router.addRoute、router.removeRoute、router.hasRoute、router.getRoutes源码分析
【vue-router源码】六、router.resolve源码解析
【vue-router源码】七、router.push、router.replace源码解析
【vue-router源码】八、router.go、router.back、router.forward源码解析
【vue-router源码】九、全局导航守卫的实现
【vue-router源码】十、isReady源码解析
【vue-router源码】十一、onBeforeRouteLeave、onBeforeRouteUpdate源码分析
【vue-router源码】十二、useRoute、useRouter、useLink源码分析
【vue-router源码】十三、RouterLink源码分析
【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] | undefinedlet 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获取对应的routeRecordMatcherconst recordMatcher = matcher.getRecordMatcher(name)if (recordMatcher) {// 如果存在recordMatcher，调用matcher.removeRoutematcher.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，建议回顾下之前的文章。

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

阅读react-redux源码(五) - connectAdvanced中store改变的事件转发、ref的处理和pure模式的处理
阅读react-redux源码 - 零阅读react-redux源码 - 一阅读react-redux源码(二) - createConnect.match函数的实现阅读react-redux源 ...
[vue] 你了解axios的原理吗？有看过它的源码吗？
[vue] 你了解axios的原理吗?有看过它的源码吗? 1.axios通过对Promise的封装实现异步请求: 2. if(answer == '有'){ if(这个问题到此为止){ return ...
Adroid游戏开发实例讲解(五)-哄娃神器之随机五彩泡(附源码)
Adroid游戏开发实例讲解(五)-哄娃神器之随机五彩泡(附源码) 程序之美泡泡一直被孩子认为是神奇的东西.记得儿时,经常趁大人不注意,偷偷抓一把洗衣粉撞到口袋里,然后自己悄悄的找来一个小瓶子, ...
【vue-router源码】十二、useRoute、useRouter、useLink源码分析
[vue-rouer源码]系列文章 [vue-router源码]一.router.install解析 [vue-router源码]二.createWebHistory.createWebHashHis ...
app商城源码_海量的SpringBoot和SSM项目【附带源码+视频教程】快速成为全栈
为了帮助更多的小伙伴进行项目的锻炼,孟哥整理较多的实战项目,包括SSM.Springboot.Springcloud.小程序等. 各种项目还在不断的更新中--仅限制学习使用,若有侵权,请联系删除. 点 ...
[附源码]计算机毕业设计Python+uniapp安卓日程管理APPqksh9(程序+源码+LW+远程部署)
[附源码]计算机毕业设计Python+uniapp安卓日程管理APPqksh9(程序+源码+LW+远程部署) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pyt ...
烽火推系统,探店通系统源码搭建？烽火推系统,探店通系统源码二次技术开发功能板块
烽火推系统,探店通系统源码搭建?烽火推系统,探店通系统源码二次技术开发功能板块烽火推,探店通系统源码如何搭建?二次技术开发功能板块有哪些?首先烽火推系统,探店通系统是基于抖音平台的系统.主要功能板块 ...
【附源码】计算机毕业设计Python安卓行程规划app7seis（源码+程序+LW+调试部署）
[附源码]计算机毕业设计Python安卓行程规划app7seis(源码+程序+LW+调试部署) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Python3.7. ...
开源项目实例源码_今年我读了四个开源项目的源码，来分享下心得
今年来看了 RocketMQ.Kafka.Dubbo .Tomcat 的源码,之前也有读者询问过如何读源码,索性就来分享一下. 其实还看了一点点 Linux.Redis.jdk8,这几个阅读的目的和上 ...

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