入门指南 | Vue Router - 从零到精通 🎯

5分钟掌握 Vue Router 核心概念，让你的单页应用拥有专业级路由体验！

🌟 什么是 Vue Router？

Vue Router 是 Vue.js 官方的客户端路由解决方案，专为构建单页应用（SPA）而设计。它就像是你应用的"导航系统"，负责：

• 🔗 URL 与内容绑定 - 让浏览器地址栏与页面内容保持同步
• ⚡ 无刷新页面切换 - 提供流畅的用户体验
• 🎯 组件化路由管理 - 基于 Vue 组件系统构建

💡 为什么选择客户端路由？

传统的多页应用每次页面跳转都需要从服务器重新加载整个页面，而客户端路由只需要更新页面的特定部分，大大提升了用户体验和应用性能。

🎮 快速体验 - 5分钟上手示例

让我们通过一个实际例子来理解 Vue Router 的工作原理：

📱 根组件 App.vue

<template>
  <div class="app">
    <h1>🎉 欢迎使用 Vue Router！</h1>
    
    <!-- 显示当前路由路径 -->
    <p><strong>当前路由：</strong> {{ $route.fullPath }}</p>
    
    <!-- 导航菜单 -->
    <nav class="navigation">
      <RouterLink to="/" class="nav-link">🏠 首页</RouterLink>
      <RouterLink to="/about" class="nav-link">ℹ️ 关于我们</RouterLink>
    </nav>
    
    <!-- 路由内容渲染区域 -->
    <main class="content">
      <RouterView />
    </main>
  </div>
</template>

<style>
.navigation {
  margin: 20px 0;
}

.nav-link {
  margin-right: 15px;
  padding: 8px 16px;
  background: #3b82f6;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.3s;
}

.nav-link:hover {
  background: #2563eb;
}

.nav-link.router-link-active {
  background: #1d4ed8;
}
</style>

🏗️ 核心架构解析

1. 🔗 RouterLink - 智能导航组件

<!-- ❌ 传统方式 -->
<a href="/about">关于我们</a>

<!-- ✅ Vue Router 方式 -->
<RouterLink to="/about">关于我们</RouterLink>

RouterLink 的优势：

• 🚫 阻止页面刷新 - 实现无缝页面切换
• 🎨 自动样式管理 - 自动添加 router-link-active 类
• 🔧 智能 URL 处理 - 自动处理编码和参数
• ♿ 无障碍支持 - 内置键盘导航支持

2. 📺 RouterView - 内容渲染区域

<template>
  <div>
    <!-- 导航区域 -->
    <nav>...</nav>
    
    <!-- 动态内容区域 - 根据当前路由显示不同组件 -->
    <RouterView />
  </div>
</template>

RouterView 的特点：

• 🎯 动态组件渲染 - 根据 URL 显示对应组件
• 🔄 支持嵌套路由 - 可以在任何地方使用
• ⚡ 高性能切换 - 组件复用和缓存优化

🛠️ 创建路由器实例

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from './views/HomeView.vue'
import AboutView from './views/AboutView.vue'

// 📋 定义路由映射
const routes = [
  { 
    path: '/', 
    name: 'Home',
    component: HomeView,
    meta: { title: '首页' }
  },
  { 
    path: '/about', 
    name: 'About',
    component: AboutView,
    meta: { title: '关于我们' }
  }
]

// 🏗️ 创建路由器实例
const router = createRouter({
  history: createWebHistory(), // 使用 HTML5 History 模式
  routes,
  scrollBehavior(to, from, savedPosition) {
    // 🔝 页面切换时滚动到顶部
    return { top: 0 }
  }
})

export default router

🔌 注册路由器插件

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

const app = createApp(App)

// 📦 注册路由器插件
app.use(router)

// 🚀 挂载应用
app.mount('#app')

插件注册后的功能：

• 🌐 全局组件注册 - RouterView 和 RouterLink 可在任何地方使用
• 🔗 全局属性注入 - $router 和 $route 可在模板中直接使用
• 🎣 组合式函数启用 - useRouter() 和 useRoute() 可用
• 🎯 初始路由解析 - 应用启动时自动解析当前 URL

🎯 在组件中访问路由

📝 选项式 API

<script>
export default {
  name: 'HomeView',
  methods: {
    // 🚀 编程式导航
    goToAbout() {
      this.$router.push('/about')
    },
    
    // 🔙 返回上一页
    goBack() {
      this.$router.back()
    },
    
    // 📊 获取路由信息
    logRouteInfo() {
      console.log('当前路由：', this.$route.path)
      console.log('路由参数：', this.$route.params)
      console.log('查询参数：', this.$route.query)
    }
  },
  
  // 🎣 路由守卫
  beforeRouteEnter(to, from, next) {
    console.log('即将进入首页')
    next()
  }
}
</script>

⚡ 组合式 API

<script setup>
import { computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

// 🎯 获取路由器和当前路由
const router = useRouter()
const route = useRoute()

// 📊 响应式计算属性
const search = computed({
  get() {
    return route.query.search ?? ''
  },
  set(search) {
    // 🔄 更新 URL 查询参数
    router.replace({ query: { search } })
  }
})

// 👀 监听路由变化
watch(
  () => route.path,
  (newPath, oldPath) => {
    console.log(`路由从 ${oldPath} 切换到 ${newPath}`)
  }
)

// 🚀 导航方法
const navigateToAbout = () => {
  router.push({
    name: 'About',
    query: { from: 'home' }
  })
}
</script>

🎨 历史模式选择

🌐 HTML5 History 模式（推荐）

import { createWebHistory } from 'vue-router'

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

特点：

• ✅ 美观的 URL - example.com/about
• ✅ SEO 友好 - 搜索引擎更容易理解
• ⚠️ 需要服务器配置 - 需要配置 fallback 到 index.html

#️⃣ Hash 模式

import { createWebHashHistory } from 'vue-router'

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

特点：

• ✅ 无需服务器配置 - 开箱即用
• ✅ 兼容性好 - 支持所有浏览器
• ❌ URL 包含 # - example.com/#/about

🎯 最佳实践建议

🏗️ 项目结构推荐

src/
├── router/
│   ├── index.js          # 主路由配置
│   ├── modules/          # 路由模块
│   │   ├── user.js       # 用户相关路由
│   │   └── admin.js      # 管理员路由
│   └── guards.js         # 路由守卫
├── views/                # 页面组件
│   ├── Home.vue
│   ├── About.vue
│   └── user/
│       ├── Profile.vue
│       └── Settings.vue
└── components/           # 通用组件
    ├── Navigation.vue
    └── Footer.vue

🎨 组件命名约定

<!-- ✅ 推荐：PascalCase -->
<RouterView />
<RouterLink to="/about">关于</RouterLink>

<!-- ✅ 也可以：kebab-case -->
<router-view />
<router-link to="/about">关于</router-link>

🔧 TypeScript 支持

import { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
    meta: {
      title: '首页',
      requiresAuth: false
    }
  }
]

🚀 下一步学习路径

恭喜你已经掌握了 Vue Router 的基础知识！接下来建议你：

📚 深入学习

1. 动态路由匹配 - 学习参数化路由
2. 嵌套路由 - 构建复杂的页面结构
3. 路由守卫 - 实现权限控制
4. 懒加载 - 优化应用性能

🛠️ 实战项目

• 🏪 电商网站 - 商品列表、详情页、购物车
• 📝 博客系统 - 文章列表、分类、标签
• 👥 用户中心 - 个人资料、设置、订单历史

🎮 在线体验

• Vue Router 演练场 - 在线试验各种功能
• Vue SFC 演练场 - 快速原型开发

---

🎉 准备好开始你的 Vue Router 之旅了吗？

Vue Router 不仅仅是一个路由库，它是构建现代 Web 应用的强大工具。掌握它，你就能创建出用户体验卓越的单页应用！

让我们继续探索 Vue Router 的更多精彩功能！ 🚀