> For the complete documentation index, see [llms.txt](https://anjia1.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://anjia1.gitbook.io/web/framework/vue-router/router-source/structure.md).

# 1. 源码结构

## 1. 本地部署

源码地址：<https://github.com/vuejs/router>

```shell
# 克隆 repo
$ git clone git@github.com:vuejs/router.git
$ cd router

# 安装项目的依赖，需要 Node.js 10+ 和 pnpm
$ pnpm install

# 执行脚本
$ pnpm build  # 构建 vue-router
$ pnpm play   # 启动 `playground/` 项目，以便在浏览器上测试和调试
$ pnpm test   # 执行所有检查，包括 test:types, test:types, test:unit, build
```

Vue Router 使用了 [pnpm](https://pnpm.io/zh/feature-comparison) 包管理器，它支持 monorepo（单一存储库/单体存储库/多包存储库/多项目存储库），也就是可以创建一个 workspace 将多个项目合并到一个仓库中。

<figure><img src="/files/CoyBLBbb4vepZEnizE4G" alt=""><figcaption></figcaption></figure>

```tsconfig
.
├── .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              // 工程脚本
```

![](/files/XSpju7JldAdaTzrRMWxc)

## 2. Vue Router 源码

Vue Router 项目位于 `./packages/router/` 文件夹下。

### 2.1 项目入口

查看 `package.json` 文件的 `scripts` 字段：

```json
// 文件 packages/router/package.json
{
    "scripts": {
        "dev": "jest --watch",
        "build": "rimraf dist && rollup -c rollup.config.js",
        ...
    }
}
```

查看 `rollup.config.js` 文件，查找 `input` 配置得到入口文件 `src/index.ts`：

```json
// 文件 packages/router/rollup.config.js
return {
    input: `src/index.ts`,
    ...
}
```

### 2.2 项目结构

Vue Router 项目的源码位于 `./packages/router/src/` 文件夹下。

```tsconfig
src/
├── history/  # history 实现，用 `create*History()` 实例化的
├── matcher/  # RouteMatcher 实现，涉及如何正确地匹配 url，也包含 path ranking 逻辑和动态路由部分
├── types/    # 全局 types，在 router 的多个部分里使用
├── utils/    # utility（实用程序）小函数，在 router 的多个部分里使用
├── router.ts    # 包含 router 创建, navigation 执行, 使用 matcher, history 实现, 调用 navigation guards
├── location.ts  # 和 route location 和 urls 相关的 helpers
├── encoding.ts  # 和 url encoding 相关的 helpers
├── errors.ts    # 不同的内部错误和外部错误，及其相关信息
└── index.ts     # 包含所有 export 的公共 API
```

![](/files/J6kJyYSZbladbKhRR1Zn)

## 3. 调试 Vue Router 代码

如 [1. 本地部署](#1.-ben-di-bu-shu) 中所说，执行 `pnpm play` 脚本便会启动位于 `./packages/playground/` 文件夹下的 playground 项目，这可以让我们很方便地在浏览器上对 Vue Router 的源码进行调试。

```json
// 文件 packages/playground/package.json
{
    "devDependencies": {
        "vue-router": "workspace:*",
    }
}
```

```shell
$ pnpm play

Scope: 3 of 4 workspace projects
packages/playground play$ vite
│   VITE v3.2.2  ready in 671 ms
│   ➜  Local:   http://localhost:5173/
│   ➜  Network: use --host to expose
└─ Running...
```

<figure><img src="/files/gN2vRezMoLDUtv9AqlEp" alt=""><figcaption></figcaption></figure>