前言
在 Vue3 中，如果说 组件是砖瓦，那么：
Vue Router 就是整栋建筑的骨架。
没有路由，就没有单页应用（SPA）。
没有合理的路由设计，项目就会变成"页面堆砌"。
Vue Router 4.x 是专为 Vue3 打造的路由库，带来了不少变化：
-
✅ 创建方式改为
createRouter -
✅ History 模式独立为函数
-
✅ 导航守卫 API 更加一致
-
✅ 与 Composition API 深度集成
这一篇，我们从 安装 → 配置 → 守卫 → 动态路由 → 懒加载，一步步搭建一个企业级路由系统。
一、安装与基础配置
1️⃣ 安装
pnpm add vue-router@4⚠️ 注意：Vue Router 4.x 只支持 Vue3，不要用错版本。
2️⃣ 创建路由实例
// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import('@/views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router3️⃣ 在 main.ts 中注册
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App)
.use(router)
.mount('#app')4️⃣ 在 App.vue 中添加路由出口
<template>
<nav>
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
</nav>
<router-view />
</template>✅ router-view是路由组件的渲染出口
二、路由模式：Hash vs History
| 模式 | API | URL 表现 | 服务器要求 |
|---|---|---|---|
| Hash | createWebHashHistory() |
/#/path |
无 |
| History | createWebHistory() |
/path |
✅ 需要配置 fallback |
📌 生产环境推荐 History 模式，URL 更干净。
三、路由配置核心概念
1️⃣ 动态路由匹配
{
path: '/user/:id',
name: 'User',
component: () => import('@/views/User.vue')
}组件中取值：
// User.vue
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)2️⃣ 嵌套路由
{
path: '/dashboard',
component: () => import('@/layouts/DashboardLayout.vue'),
children: [
{
path: 'profile',
component: () => import('@/views/dashboard/Profile.vue')
},
{
path: 'settings',
component: () => import('@/views/dashboard/Settings.vue')
}
]
}📌 子路由渲染在父组件的 <router-view>中
3️⃣ 路由重定向
{
path: '/',
redirect: '/home'
}4️⃣ 路由别名
{
path: '/home',
alias: '/index',
component: () => import('@/views/Home.vue')
}四、编程式导航
1️⃣ 使用 useRouter
import { useRouter } from 'vue-router'
const router = useRouter()
const goToUser = () => {
router.push('/user/123')
}2️⃣ 带参数的跳转
router.push({
name: 'User',
params: { id: 123 }
})3️⃣ 替换当前记录（无历史）
router.replace('/login')4️⃣ 前进 / 后退
router.go(-1) // 后退
router.go(1) // 前进五、导航守卫（重点）
1️⃣ 全局前置守卫
router.beforeEach((to, from, next) => {
// 判断是否登录
const token = localStorage.getItem('token')
if (to.meta.requiresAuth && !token) {
return next('/login')
}
next()
})📌 Vue Router 4 中 next是可选的，可以直接 return：
router.beforeEach((to) => {
if (to.meta.requiresAuth && !localStorage.getItem('token')) {
return '/login'
}
})2️⃣ 全局后置钩子
router.afterEach((to) => {
document.title = to.meta.title as string || 'Vue3 App'
})3️⃣ 路由独享守卫
{
path: '/admin',
component: () => import('@/views/Admin.vue'),
beforeEnter: (to, from) => {
return localStorage.getItem('role') === 'admin'
}
}4️⃣ 组件内守卫
import { onBeforeRouteLeave } from 'vue-router'
onBeforeRouteLeave((to, from) => {
if (confirm('你有未保存的更改，确定离开吗？')) {
return true
}
return false
})六、路由元信息（meta）
{
path: '/dashboard',
meta: {
requiresAuth: true,
title: '仪表盘',
roles: ['admin', 'editor']
}
}守卫中读取：
router.beforeEach((to) => {
if (to.meta.requiresAuth) {
// 鉴权逻辑
}
})七、路由懒加载（性能优化）
1️⃣ 基础懒加载
component: () => import('@/views/Home.vue')2️⃣ 分组懒加载（Webpack/Vite）
component: () => import(/* webpackChunkName: "user" */ '@/views/User.vue')📌 同一组的组件会打包到同一个 chunk
八、动态路由添加（权限路由）
// 根据用户权限动态添加路由
const routes = getRoutesByRole(userRole)
routes.forEach(route => {
router.addRoute(route)
})📌 这是后台管理系统权限控制的核心方案
九、路由常见误区
❌ 误区 1：在 setup 外使用 useRoute / useRouter
const route = useRoute() // ❌ 必须在 setup 中调用❌ 误区 2：params 和 query 混用
router.push({ path: '/user', params: { id: 1 } }) // ❌ params 会被忽略✅ 正确：
router.push({ name: 'User', params: { id: 1 } })十、面试高频问答
Q1：Vue Router 4 和 3 的主要区别？
创建方式改为
createRouter，History 模式独立为函数，守卫 API 更一致。
Q2：路由守卫的执行顺序？
全局前置 → 路由独享 → 组件内 beforeRouteEnter → 全局解析 → 全局后置
Q3：动态路由和嵌套路由的区别？
动态路由是路径参数匹配，嵌套路由是组件层级关系。
十一、总结（架构级）
-
Vue Router 4 是 Vue3 的官方路由方案
-
createRouter+createWebHistory是标准配置 -
导航守卫是权限控制的核心
-
路由懒加载是性能优化的必选项
-
动态路由是后台系统的标配
📢 下期预告
👉 第 18 篇：路由进阶 ------ 懒加载、滚动行为与动态权限路由