theme: nico
本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！
开场
哈喽大咖好，我是跑手，本次给大家带来vue-router@4.x源码解读的一些干货。
众所周知，vue-router是vue官方指定的路由管理库，拥有21.2k github star（18.9k for Vue 2 2.3k for Vue 3）和 2,039,876 的周下载量，实属难得的优秀开源库。
对很多开发者来讲，了解vue-router还是很有必要的，像React Router、Vue Router这系列单页应用底层都是借助 H5 History API能力来实现的。
那么，Vue Router又是如何借用H5 History，完美与Vue结合在一起，并处理当中千丝万缕的联系的呢？在《Vue Router 4 源码探索系列》专栏中，我们一起揭秘它的神秘面纱。
那么今天，我们先来聊下大家在使用vue-router时候第一个用到的方法——createRouter。createRouter作为vue-router最重要的方法之一，里面集合了路由初始化整个流程，核心路由方法的定义等职责。
在这篇文章里，你能获得以下增益：
- 了解vue-router的包管理模式 —— pnpm下对Monorepo的管理；
- 了解在
vue3框架下，createRouter创建路由整个过程，以及它周边函数的功能职责； - 了解router对象中
getRoutes、push等12个核心方法的实现原理；
关于vue-router@4.x
对于vue-router的版本3.x和4.x还是有区别的，并且源码的git仓库也不一样。vue-router@4.x主要是为了兼容vue3而生，包括兼容vue3的composition API，并提供更友好、灵活的hooks方法等。本章节主要是探讨4.x版本的源码。
源码仓库：vue-router@4.x
pnpm的包管理模式
纵贯而视，作者用了pnpm管理Monorepo方式来组建vue-router，这样项目管理模式带来的好处无需多言，主要有以下优势：
- pnpm优势：引入全局的
store配合hard link机制来优化项目内的node_modules依赖，使得存储空间、打包性能得到显著提升。根据目前官方提供的 benchmark 数据可以看出在一些综合场景下， pnpm比 npm/yarn 快了大概两倍； - Monorepo 支持：pnpm因其本身的设计机制特点，特别适合多包管理的情景，导致很多多包管理的问题都得到了相当有效的解决；
- workspace 支持：pnpm 提供了 workspace 来支持依赖版本的引用问题，见官网文档: pnpm workspaces。
扩展阅读：
Monorepo是管理项目代码的方式之一，指在一个大的项目仓库（repo）中 管理多个模块/包（package），每个包可以独立发布，这种类型的项目大都在项目根目录下有一个packages文件夹，分多个项目管理。 大概结构如下：
项目结构
代码语言：javascript复制.
├── .github
├── .gitignore
├── .npmrc // 项目的配置文件
├── .prettierignore
├── .prettierrc
├── LICENSE
├── README.md
├── netlify.toml
├── package.json
├── packages // 项目分包
│ ├── docs // vue router API文档
│ ├── playground // 本地调试项目
│ └── router // vue router源码
├── pnpm-lock.yaml // 依赖版本控制
├── pnpm-workspace.yaml // 工作空间根目录
└── scripts // 工程脚本由于本文主要探讨是vue-router原理，对于包管理在这先不多介绍，日后有机会单独出一篇pnpm文章介绍。
