vue-router 源码分析——1. 路由匹配
小伙伴们晚上好，今天开一个新坑——vue-router的源码分析。
vuex的源码分析已经发布完了，感兴趣的小伙伴可以看我之前发的文章。
源码分析步骤也是和之前一样的，积沙成塔式地学习源码。根据官网的内容来分析，重点关注某一功能是如何实现的。
创建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: Matcher constructor (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 any oldPathList?: 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 } = route const 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 }
-
至此，router在初始化时，创建了一个 VueRouter类，里面有一个 matcher属性，包含了用户定义的路由的path、components和相关的匹配逻辑函数，以及三张路由记录表。
-
下一章会分析 router-link 组件是如何实现导航的。
