异常教程
vue3 路由跳转（长文解析）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观
前言：为什么需要学习 Vue3 路由跳转？
在现代 Web 开发中，单页应用（SPA）因其流畅的用户体验和高效的资源利用，逐渐成为主流开发模式。而 Vue.js 作为前端框架中的佼佼者，其配套的 Vue Router 3 则是实现页面跳转与状态管理的核心工具。本文将从零开始，通过比喻、案例和代码示例，系统性地解析 Vue3 路由跳转的核心概念与实践技巧。无论你是刚接触前端的开发者，还是希望提升路由技能的中级工程师，都能通过本文掌握这一关键技能。
一、基础概念：理解 Vue Router 的核心逻辑
1.1 路由系统的核心作用
可以把路由系统想象成一座城市的地铁网络。每个页面（组件）就像地铁站，而用户通过输入 URL（或点击链接）选择目的地，路由系统则负责规划路径并完成“跳转”。Vue Router 在 Vue3 中扮演的角色，正是这样的“交通调度员”。
1.2 核心组件解析
- Router 实例：通过
createRouter创建，是路由系统的“控制中心”。 - Route 对象：包含当前路径、参数等信息的“导航地图”。
- Route Component：对应不同路径的组件，是页面内容的“建筑模块”。
1.3 安装与基础配置
// 安装依赖
npm install vue-router@next
// 创建路由配置
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
二、编程式导航：掌握主动权
2.1 push() 方法：创建新历史记录
// 在组件中使用
this.$router.push('/about')
// 或使用命名路由
this.$router.push({ name: 'aboutPage' })
比喻：就像乘坐地铁时选择新线路，会生成新的“站点记录”，用户可以通过浏览器的“返回”按钮回到上一页。
2.2 replace() 方法：覆盖历史记录
this.$router.replace('/contact')
比喻：如同在地铁站台直接更换车票，不会留下历史记录，用户无法通过“返回”回到跳转前页面。
2.3 go() 方法：控制历史记录指针
// 前进 1 步
this.$router.go(1)
// 后退 2 步
this.$router.go(-2)
比喻：就像在地铁站台直接调整方向，可以快速跳转到历史记录中的任意站点。
三、导航守卫：构建路由的“交通规则”
3.1 全局前置守卫 beforeEach()
router.beforeEach((to, from, next) => {
console.log('即将跳转到:', to.path)
// 检查登录状态
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})
比喻：如同地铁入口的安检员，对每个通行请求进行合法性检查。
3.2 组件内守卫 beforeRouteUpdate()
export default {
beforeRouteUpdate(to, from, next) {
console.log('当前组件路由参数发生改变')
// 更新数据
this.fetchData(to.params.id)
next()
}
}
比喻：就像地铁车厢内的自动报站系统，实时感知路径变化并做出响应。
3.3 守卫生命周期图谱
| 守卫类型 | 触发时机 | 主要用途 |
|---|---|---|
| beforeEach | 跳转前全局检查 | 权限验证、路由拦截 |
| beforeResolve | 导航被确认前（异步处理） | 数据预加载 |
| beforeRouteLeave | 离开当前路由前 | 提示未保存的表单数据 |
四、进阶技巧：动态路由与命名路由
4.1 动态路由参数
// 路由配置
{ path: '/user/:id', component: UserDetail }
// 在组件中获取参数
const route = useRoute()
const userId = route.params.id
比喻：如同地铁站名中的“XX路站”，通过参数标识不同的用户页面。
4.2 命名路由与嵌套路由
// 命名路由配置
{
path: '/profile',
name: 'userProfile',
component: Profile,
children: [
{ path: 'settings', component: Settings }
]
}
// 使用命名跳转
this.$router.push({ name: 'userProfile', params: { id: 123 } })
比喻：如同地铁线路中的“主站”与“支线”，通过层级结构管理复杂路由。
五、实战案例：构建用户管理系统
5.1 路由配置与权限控制
// 需要登录的路由
const requiresAuth = (to, from, next) => {
const isAuthenticated = checkAuth()
isAuthenticated ? next() : next('/login')
}
const routes = [
{ path: '/', component: Dashboard, meta: { requiresAuth: true }, beforeEnter: requiresAuth },
{ path: '/login', component: Login },
{
path: '/users',
component: UserList,
children: [
{ path: ':id', component: UserDetail, meta: { requiresAuth: true } }
]
}
]
5.2 动态路由跳转与表单提交
// 在用户列表页跳转到详情页
handleViewUser(userId) {
this.$router.push({
name: 'userDetail',
params: { id: userId },
query: { tab: 'orders' } // 附加查询参数
})
}
六、常见问题与解决方案
6.1 路由跳转后页面未更新
原因：组件复用导致数据未刷新
解决方案：使用 key 属性强制重新渲染：
<router-view :key="$route.fullPath"></router-view>
6.2 动态路由参数丢失
原因：未正确绑定 useRoute() 或 this.$route
解决方案：使用 watch 监听参数变化：
import { watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
watch(
() => route.params.id,
(newId) => {
fetchData(newId)
}
)
结论：掌握 Vue3 路由跳转的三大核心能力
通过本文的学习，你已经掌握了 Vue3 路由跳转的三大核心能力：基础配置、编程式导航、守卫机制。这些技能如同交通工程师的工具箱，能帮助你构建复杂而稳定的单页应用。当用户在你的应用中自由穿梭时，路由系统就像隐形的“交通调度师”，默默管理着每个页面的跳转与状态。
建议读者在实际项目中尝试以下进阶实践：
- 实现多级嵌套路由与权限系统
- 结合 Pinia 实现路由与状态管理的联动
- 使用路由元信息（
meta）管理页面标题与导航栏状态
掌握这些技能后，你将能更从容地应对复杂前端项目的路由需求。记住，路由跳转不仅是技术问题，更是用户体验的基石——每一次流畅的跳转，都是对用户最好的“交通服务”。