# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://anjia1.gitbook.io/web/framework/vue-router/router-source/structure.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.