当前位置：首页 > news >正文

vue-router 源码分析——1. 路由匹配

news 2025/7/6 19:37:23

这是对vue-router 3 版本的源码分析。
本次分析会按以下方法进行：

按官网的使用文档顺序，围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码，更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升，甚至面试时的回答都非常有帮助。
在围绕某个功能展开讲解时，所有不相干的内容都会暂时去掉，等后续涉及到对应的功能时再加上。这样最大的好处就是能循序渐进地学习，同时也不会被不相干的内容影响。省略的内容都会在代码中以…表示。
每段代码的开头都会说明它所在的文件目录，方便定位和查阅。如果一个函数内容有多个函数引用，这些都会放在同一个代码块中进行分析，不同路径的内容会在其头部加上所在的文件目录。

本章讲解router中创建vue-router 实例时内部发生了什么。
另外我的vuex3源码分析也发布完了，欢迎大家学习：
vuex3 最全面最透彻的源码分析

创建vue-router 实例时内部发生了什么

假设最基本的情况，即官网中的入门示例：

const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar }
]
const router = new VueRouter({routes // (缩写) 相当于 routes: routes
})

在实例化的过程中创建matcher 匹配器，调用了 createMatcher 函数

// ./router.js
import type { Matcher } from './create-matcher'
export default class VueRouter {matcher: Matcherconstructor (options: RouterOptions = {}) {this.matcher = createMatcher(options.routes || [], this)  }
}

在 createMatcher 函数中调用 createRouteMap 函数创建了一些和path相关的数据，并返回包含自己内容定义的一些函数组成的对象。

// createMatcher函数 ./create-matcher.js
import { createRouteMap } from './create-route-map'
export function createMatcher(routes, route): {const {pathList, pathMap, nameMap } = createRouteMap(routes)function match() {}function addRoute() {}function getRoutes() {}function addRoutes() {}return {match,addRoute,getRoutes,addRoutes    }
}

createRouteMap函数利用routes数据得出上面需要的对象内容（pathList, pathMap, nameMap），对应 ./create-route-map.js 文件。
内部遍历routes => route，并调用 addRouteRecord 函数。
对每个route的path，调用 normalizePath 函数规范化。
构建一个 record 对象，基本内容还是和route一样，比如path, component。component这里有一个逻辑或运算符，是用来处理命名视图的，可以先不管。
pathList 记录每个record的path。
pathMap 记录record的path和record的映射关系。
nameMap 记录name（命名路由）和recoed的映射关系。

export function createRouteMap(routes: Array<RouteConfig>,// 下面的其他参数可先不管，因为只传了routes入参，都可看做undefine or anyoldPathList?: Array<string>,oldPathMap?: Dictionary<RouteRecord>,oldNameMap?: Dictionary<RouteRecord>,parentRoute?: RouteRecord 
): {pathList: Array<string>,pathMap: Dictionary<RouteRecord>,nameMap: Dictionary<RouteRecord>
} {// 初始化都是空数组和空字典const pathList: Array<string> = oldPathList || []const pathMap: Dictionary<RouteRecord> = oldPathMap || Object.create(null)const nameMap: Dictionary<RouteRecord> = oldNameMap || Object.create(null)routes.forEach(route => {addRouteRecord(pathList, pathMap, nameMap, route, parentRoute)    })return {pathList,pathMap,nameMap    }
}function addRouteRecord(pathList: Array<string>,pathMap: Dictionary<RouteRecord>,nameMap: Dictionary<RouteRecord>,route: RouteConfig,parent?: RouteRecord,matchAs?: string
) {const { path, name } = routeconst pathToRegexpOptions = {}// path 规范化const normalizedPath = normalizePath(path, parent, pathToRegexpOptions.strict)const record: RouteRecord = {path: normalizedPaath,components: route.components || { default: route.component },...}// 记录 pathList 和 pathMap 的内容if (!pathMap[record.path]) {pathList.push(record.path)pathMap[record.path] = record    }
}function normalizePath(path: string,parent?: RouteRecord,strict?: boolean
) {if (!strict) path = path.replace(/\/$/, '') // 将path尾部的 / 去掉（如果有）if (path[0] == '/') return path
}