Vue-Router

仓库地址

vue-router 源码
个人编写的 vue-router 部分功能-TypeScript 版本

调试流程

1. 下载：git clone git@github.com:vuejs/vue-router.git --branch v3.6.5

2. 安装依赖：npm install

3. 在 dist 目录下添加 vue 项目, 可以是 html，更建议通过 vue-cli 或 vite 创建项目，不安装 vue-router, 然后通过相对路径引入 dist 目录下的 vue-router.js。
   

4. 打开两个终端，一个是在vue-router目录下，执行npm run dev:dist。另一个在dist/你创建的vue项目目录下,执行npm run serve。

5. 通过在 vue-router 的 src 目录下添加 debugger。你就可以慢慢根据需求调试 vue-router 的源码。

调试说明

1. vue-router@3.6.5是兼容 vue2 的最新一个版本。(不清楚之后会不会更新)

2. 如果你能够在 vue 项目中，通过一些方式直接调试 node_modules 中的 vue-router 也可以，但我上述提供的调试方式还是比较容易操作的。

源码介绍

1. vue-router 包括两种路由模式hash跟html5以及两个组件router-link和router-view。个人建议调试流程先调试hash模式，根据官方文档提供的 API。以及日常开发的使用习惯进行调试。然后再调试html5的，逻辑流程差别不大。至于两个组件，还是需要有一点 vue2 的源码基础才好理解。此外，因为 SSR 的缘故，像 onReady 这类事件添加处理，可能平常开发 CSR 应用用不到，但还是有它存在的作用的。

2. 我个人的调试方式，先是 router 初始化的逻辑->然后是 router init 的逻辑->各自事件添加处理器的执行逻辑，分别在哪个时间点。-> 官方文档上看到的，我个人疑惑比较大的 API 的处理逻辑。(我只关注了 hash 模式)-> 单元测试集。

参考资料

这一块其实资料非常少，个人觉得比较好的参考只有 vue-router 的官方文档。
vue-router 官方文档