Vue Router

这一课你将能做到

1. 用 createRouter 配置路由表
2. 使用动态路由匹配不同参数
3. 配置嵌套路由实现布局复用
4. 用编程式导航跳转页面
5. 使用路由守卫控制页面访问权限
6. 实现路由懒加载优化性能

为什么要学

单页应用（SPA）的核心是「页面不刷新，内容切换」。Vue Router 就是管理这种切换的「交通指挥系统」。没有它，你的 Vue 应用只能是一个页面。

人话：Vue Router 就像「商场导购牌」。用户想去二楼（点击链接），导购牌指给他路线（路由匹配），到了二楼看到不同的店铺（组件渲染），全程不用出商场（页面不刷新）。

先建立图像

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/user/:id', component: User }
  ]
})

浏览器地址栏变化 → 路由匹配 → 对应组件渲染到 <router-view>。

跟着做

步骤 1：安装与基础配置

npm install vue-router@4

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/about', name: 'About', component: About }
  ]
})

export default router

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

步骤 2：router-view 与 router-link

<!-- App.vue -->
<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </nav>
  <router-view />
</template>

<router-link> 渲染为 <a> 标签，点击不刷新页面；<router-view> 是组件渲染出口。

步骤 3：动态路由

// router/index.js
{ path: '/user/:id', name: 'User', component: () => import('../views/User.vue') }

<!-- User.vue -->
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
// route.params.id 获取动态参数
</script>

<template>
  <h1>用户 ID：{{ route.params.id }}</h1>
</template>

步骤 4：嵌套路由

// router/index.js
{
  path: '/settings',
  component: () => import('../views/Settings.vue'),
  children: [
    { path: '', component: () => import('../views/SettingsHome.vue') },
    { path: 'profile', component: () => import('../views/SettingsProfile.vue') },
    { path: 'security', component: () => import('../views/SettingsSecurity.vue') }
  ]
}