Vue Router

Vue Router 是 Vue.js 的官方路由。

它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

功能包括：

  • 嵌套路由映射

  • 动态路由选择

  • 模块化、基于组件的路由配置

  • 路由参数、查询、通配符

  • 展示由 Vue.js 的过渡系统提供的过渡效果

  • 细致的导航控制

  • 自动激活 CSS 类的链接

  • HTML5 history 模式或 hash 模式

  • 可定制的滚动行为

  • URL 的正确编码

安装

直接下载 / CDN

https://unpkg.com/vue-router@4

Unpkg.com 提供了基于 npm 的 CDN 链接。

上述链接将始终指向 npm 上的最新版本。

你也可以通过像 https://unpkg.com/vue-router@4.0.15/dist/vue-router.global.js 这样的 URL 来使用特定的版本或 Tag。

这将把 Vue Router 暴露在一个全局的 VueRouter 对象上，例如 VueRouter.createRouter(…)。

包管理器

对于一个现有的使用 JavaScript 包管理器的项目，你可以从 npm registry 中安装 Vue Router：

npm install vue-router@4

如果你打算启动一个新项目，你可能会发现使用 create-vue 这个脚手架工具更容易，它能创建一个基于 Vite 的项目，并包含加入 Vue Router 的选项：

npm create vue@latest

选项：

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... vue-project
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要   cypress/nightwatch/playwright
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是

正在初始化项目 D:\js\vue-router\demo\vue-project...

项目初始化完成，可执行以下命令：

  cd vue-project
  npm install
  npm run dev

对应的 package.json

{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force"
  },
  "dependencies": {
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^20.12.5",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue/tsconfig": "^0.5.1",
    "npm-run-all2": "^6.1.2",
    "typescript": "~5.4.0",
    "vite": "^5.2.8",
    "vue-tsc": "^2.0.11"
  }
}

不得不说这种代码生成体验非常好。

命令说明

下面用通俗、清晰、一步到位的方式解释一下：

npm create vue@latest login-app 是什么？

它是 Vue 官方提供的脚手架创建命令（基于 create-vue），用于快速搭建一个最新版本的 Vue 3 + Vite 项目。

等价于：

npx create-vue@latest login-app

执行后，它会：

  1. 自动下载并运行 create-vue
  2. 在当前目录下创建一个叫 login-app 的文件夹
  3. 引导你选择一系列项目配置（例如是否使用 TypeScript、是否使用 Router 等）
  4. 自动生成项目模板结构

整个交互过程每一个选项的作用（官方原始的 create-vue 选项）

执行后，会出现如下选项，我逐一解释：

1. Project name

例：login-app

→ 即项目目录名称。 你也可以直接通过命令行提供（你已经给了）。

2. Add TypeScript?

是否使用 TypeScript。

  • Yes → 项目用 .ts .tsx，类型更安全
  • No → 使用纯 JavaScript

3. Add JSX Support?

是否支持 JSX/TSX。

  • Yes → 可以写 <div>{ state.value }</div> 的 JSX
  • No → 使用普通 .vue SFC 文件即可

大部分 Vue 项目不用 JSX，所以通常选 No。

4. Add Vue Router for Single Page Application development?

是否安装 Vue Router。

  • Yes → 直接生成 /router/index.ts
  • No → 不安装，你需要手动添加

如果你的 login-app 是单页 SPA，一般选 Yes。

5. Add Pinia for state management?

是否使用 Pinia 作为全局状态管理。

  • Yes → 自动安装并创建 /store 文件夹
  • No → 后续需要自己手动安装

6. Add Vitest for Unit Testing?

是否使用 Vitest 做单元测试。

  • Yes → 自动创建测试目录和配置
  • No → 不加入测试工具

7. Add Cypress for end-to-end testing?

是否加入 Cypress E2E测试。

  • Yes → 加入 cypress 文件夹与配置
  • No → 不加入

8. Add ESLint for code quality?

是否加入 ESLint。

  • Yes → 配置代码格式检查
  • No → 不添加（更轻量）

9. Add Prettier for code formatting?

是否加入 Prettier 自动格式。

  • Yes → 自动格式化代码
  • No → 不加

一般选 Yes，因为团队协作需要统一格式。

最终生成项目结构（概览）

login-app/
 ├─ src/
 │   ├─ assets/
 │   ├─ components/
 │   ├─ App.vue
 │   ├─ main.ts
 ├─ index.html
 ├─ package.json
 └─ vite.config.ts

你可能会问（常见疑问合集）

❓1. npm create 与 npx create-vue 区别？

没有区别，只是写法不同：

写法 等价 说明
npm create vue@latest login-app npx create-vue@latest login-app npm7+提供的新语法，推荐
npm init vue@latest 同上 与 npm init 兼容的写法

❓2. 我想免去交互式选项？

可以使用参数自动生成：

npm create vue@latest login-app -- --ts --router --pinia

参考资料

https://github.com/jekip/naive-ui-admin

https://router.vuejs.org/zh/guide/