专做商铺中介网站,wordpress获取用户注册时间,交换链接的例子,报名工具小程序官网这是对vue-router 3 版本的源码分析。 本次分析会按以下方法进行#xff1a;
按官网的使用文档顺序#xff0c;围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码#xff0c;更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升#xff0c;甚至面试时…这是对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: ArrayRouteConfig,// 下面的其他参数可先不管因为只传了routes入参都可看做undefine or anyoldPathList?: Arraystring,oldPathMap?: DictionaryRouteRecord,oldNameMap?: DictionaryRouteRecord,parentRoute?: RouteRecord
): {pathList: Arraystring,pathMap: DictionaryRouteRecord,nameMap: DictionaryRouteRecord
} {// 初始化都是空数组和空字典const pathList: Arraystring oldPathList || []const pathMap: DictionaryRouteRecord oldPathMap || Object.create(null)const nameMap: DictionaryRouteRecord oldNameMap || Object.create(null)routes.forEach(route {addRouteRecord(pathList, pathMap, nameMap, route, parentRoute) })return {pathList,pathMap,nameMap }
}function addRouteRecord(pathList: Arraystring,pathMap: DictionaryRouteRecord,nameMap: DictionaryRouteRecord,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
}至此router在初始化时创建了一个 VueRouter类里面有一个 matcher属性包含了用户定义的路由的path、components和相关的匹配逻辑函数以及三张路由记录表。下一章会分析 router-link 组件是如何实现导航的。
