安装指南 | Vue Router - 5分钟快速上手 🚀

从零开始，让你的 Vue.js 项目拥有强大的路由功能！

🎯 选择适合你的安装方式

Vue Router 4 提供了多种安装方式，无论你是新手还是老司机，总有一种方式适合你。

📦 包管理器安装（推荐）

🔥 现有项目快速集成

如果你已经有一个 Vue.js 项目，只需一行命令就能添加 Vue Router：

npmyarnpnpmbun

bash

npm install vue-router@4

bash

yarn add vue-router@4

bash

pnpm add vue-router@4

bash

bun add vue-router@4

🆕 全新项目脚手架

想要从零开始创建一个包含 Vue Router 的项目？使用官方脚手架工具 create-vue 是最佳选择：

npmyarnpnpmbun

bash

npm create vue@latest my-router-app

bash

yarn create vue my-router-app

bash

pnpm create vue my-router-app

bash

bun create vue my-router-app

运行命令后，你会看到一系列配置选项：

✔ Project name: … my-router-app
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes ← 选择 Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes

💡 专业提示：选择 "Add Vue Router" 选项，脚手架会自动为你配置好路由结构和示例代码！

📁 项目结构预览

使用脚手架创建的项目会包含以下路由相关文件：

my-router-app/
├── src/
│   ├── router/
│   │   └── index.js          # 路由配置文件
│   ├── views/                # 页面组件目录
│   │   ├── HomeView.vue      # 首页组件
│   │   └── AboutView.vue     # 关于页面组件
│   └── App.vue               # 根组件（包含 <router-view>）

🌐 CDN 方式（快速体验）

想要快速体验 Vue Router 而不想安装任何东西？CDN 方式是你的最佳选择：

📡 最新版本（推荐）

html

<!-- 始终指向最新版本 -->
<script src="https://unpkg.com/vue-router@4"></script>

🔒 指定版本（生产环境推荐）

html

<!-- 指定具体版本，更稳定 -->
<script src="https://unpkg.com/vue-router@4.2.5/dist/vue-router.global.js"></script>

🎮 完整示例

html

<!DOCTYPE html>
<html>
<head>
  <title>Vue Router CDN 示例</title>
  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://unpkg.com/vue-router@4"></script>
</head>
<body>
  <div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>

  <script>
    const { createApp } = Vue
    const { createRouter, createWebHashHistory } = VueRouter

    // 定义组件
    const Home = { template: '<div>欢迎来到首页！</div>' }
    const About = { template: '<div>这是关于页面</div>' }

    // 定义路由
    const routes = [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ]

    // 创建路由实例
    const router = createRouter({
      history: createWebHashHistory(),
      routes
    })

    // 创建应用实例
    createApp({}).use(router).mount('#app')
  </script>
</body>
</html>

🛠️ 安装后的第一步

ES 模块导入

在使用包管理器安装后，你可以通过 ES 模块导入 Vue Router：

javascript

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在 main.js 中注册

javascript

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

🎉 验证安装成功

安装完成后，你可以通过以下方式验证 Vue Router 是否正常工作：

检查路由对象：在组件中使用 this.$router 或 useRouter()
查看浏览器控制台：确保没有 Vue Router 相关的错误信息
测试路由跳转：尝试使用 <router-link> 或编程式导航

🔧 常见问题解决

❓ 版本兼容性

Vue Router 4.x → 适用于 Vue 3.x
Vue Router 3.x → 适用于 Vue 2.x

❓ TypeScript 支持

Vue Router 4 内置了完整的 TypeScript 类型定义，无需额外安装类型包：

typescript

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  { path: '/', name: 'Home', component: () => import('./views/Home.vue') }
]

❓ Vite 项目配置

如果你使用 Vite，确保在 vite.config.js 中正确配置：

javascript

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

🎯 下一步

安装完成后，建议你：

📖 阅读基础指南 - 了解 Vue Router 的核心概念
🎮 查看示例代码 - 学习最佳实践
🔍 探索 API 文档 - 深入了解所有功能

💡 专业提示

推荐使用包管理器安装方式，这样可以享受到：

🔄 自动依赖管理
📦 Tree-shaking 优化
🛠️ 完整的开发工具支持
🔧 TypeScript 类型提示

安装指南 | Vue Router - 5分钟快速上手 🚀 ​

🎯 选择适合你的安装方式 ​

📦 包管理器安装（推荐） ​

🔥 现有项目快速集成 ​

🆕 全新项目脚手架 ​

📁 项目结构预览 ​

🌐 CDN 方式（快速体验） ​

📡 最新版本（推荐） ​

🔒 指定版本（生产环境推荐） ​

🎮 完整示例 ​

🛠️ 安装后的第一步 ​

ES 模块导入 ​

在 main.js 中注册 ​

🎉 验证安装成功 ​

🔧 常见问题解决 ​

❓ 版本兼容性 ​

❓ TypeScript 支持 ​

❓ Vite 项目配置 ​

🎯 下一步 ​

💡 专业提示

安装指南 | Vue Router - 5分钟快速上手 🚀

🎯 选择适合你的安装方式

📦 包管理器安装（推荐）

🔥 现有项目快速集成

🆕 全新项目脚手架

📁 项目结构预览

🌐 CDN 方式（快速体验）

📡 最新版本（推荐）

🔒 指定版本（生产环境推荐）

🎮 完整示例

🛠️ 安装后的第一步

ES 模块导入

在 main.js 中注册

🎉 验证安装成功

🔧 常见问题解决

❓ 版本兼容性

❓ TypeScript 支持

❓ Vite 项目配置

🎯 下一步