第一章：Vue Router 简介

什么是 Vue Router？

Vue Router 是 Vue.js 官方路由管理器，用于构建单页面应用（SPA）。

┌─────────────────────────────────────────────────────────────┐
│                    Vue Router 架构                          │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                   浏览器                             │   │
│  │  ┌───────────────────────────────────────────────┐ │   │
│  │  │  URL: /home                                   │ │   │
│  │  └───────────────────────────────────────────────┘ │   │
│  └─────────────────────────────────────────────────────┘   │
│                           │                                 │
│                           ▼                                 │
│  ┌─────────────────────────────────────────────────────┐   │
│  │               Vue Router                            │   │
│  │  ┌───────────────────────────────────────────────┐ │   │
│  │  │  路由匹配 → 组件渲染                          │ │   │
│  │  │  /home → Home.vue                            │ │   │
│  │  │  /about → About.vue                          │ │   │
│  │  └───────────────────────────────────────────────┘ │   │
│  └─────────────────────────────────────────────────────┘   │
│                           │                                 │
│                           ▼                                 │
│  ┌─────────────────────────────────────────────────────┐   │
│  │               Vue 组件                              │   │
│  │  ┌───────────┐ ┌───────────┐ ┌───────────┐         │   │
│  │  │ Home      │ │ About     │ │ User      │         │   │
│  │  │ Component │ │ Component │ │ Component │         │   │
│  │  └───────────┘ └───────────┘ └───────────┘         │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

安装

npm install vue-router

快速开始

创建路由

// router/index.js
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
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

使用路由

<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </nav>

  <router-view />
</template>

核心概念

router-link

<!-- 声明式导航 -->
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>

<!-- 带参数 -->
<router-link :to="{ name: 'User', params: { id: 1 } }">用户</router-link>

router-view

<!-- 路由出口 -->
<router-view />

<!-- 命名视图 -->
<router-view name="header" />
<router-view name="main" />
<router-view name="footer" />

小结

Vue Router 基础概念：

• 架构：URL → Router → Component
• 安装：npm install vue-router
• 创建路由：createRouter、routes
• 核心组件：router-link、router-view

下一章我们将学习路由配置。