Vue 路由如何手动跳转？教你 router.push 与 replace 的实战用法

Vue 路由如何手动跳转？教你 router.push 与 replace 的实战用法需要先看清适用场景和关键步骤，避免只记结论却忽略实际限制。

Vue路由编程式导航最常用router.push和router.replace：push向历史栈添加新记录支持后退，replace则替换当前记录无法后退；二者均支持字符串、对象、命名路由写法；router方法返回Promise可捕获导航错误；router.back/forward/go用于步长跳转。

Vue 路由手动跳转最常用的就是 router.push 和 router.replace，它们都用于编程式导航，区别在于是否向浏览器历史栈添加新记录。

router.push：跳转并保留返回能力

调用 router.push() 会向 history 栈中添加一条新记录，用户点击浏览器“后退”按钮可回到上一页。

1. 支持字符串路径：router.push('/user/123')
2. 支持对象写法（推荐）：router.push({ path: '/user', query: { id: '123' } })
3. 支持命名路由 + 参数：router.push({ name: 'UserProfile', params: { id: 123 } })（需在路由配置中定义 name 和 props: true 或使用 params 传参）
4. 注意：params 在 path 模式下不生效，必须配合 name 使用

router.replace：跳转并替换当前记录

router.replace() 不新增 history 记录，而是直接替换当前页，因此无法通过“后退”回到原页面——适合登录后跳首页、表单提交成功后跳结果页等场景。

1. 用法与 push 完全一致，只是语义不同：router.replace('/home') 或 router.replace({ name: 'Success', query: { orderNo: 'NO2024001' } })
2. 常见于避免用户重复提交：提交后 replace 到成功页，防止刷新或后退再次触发提交

跳转时处理异步与错误

router 方法返回 Promise，可用于捕获导航失败（如路由守卫中 next(false)、目标路由不存在、异步组件加载失败等）。

1. 简单错误处理：router.push('/admin').catch(err => console.warn('导航被阻止:', err))
2. 结合 await 更清晰：注意不要在 setup 中直接 await router.push，应放在事件回调里
3. 典型场景：登录后跳转原页面，若权限不足则重定向到 403 页面

router.go、router.back、router.forward 的辅助作用

这三个方法用于基于 history 步长的跳转，使用频率较低但有特定用途：

1. router.back() 等价于 router.go(-1)，模拟浏览器后退
2. router.forward() 等价于 router.go(1)，模拟前进
3. router.go(n) 可跳转任意步长，比如 router.go(-2) 直接退两页
4. 注意：若历史栈不足（如刚打开页面就调 back），不会报错但无效果