Vue路由编程式导航最常用router.push和router.replace：push向历史栈添加新记录支持后退，replace则替换当前记录无法后退；二者均支持字符串、对象、命名路由写法；router方法返回Promise可捕获导航错误；router.back/forward/go用于步长跳转。
Vue 路由手动跳转最常用的就是 router.push 和 router.replace，它们都用于编程式导航，区别在于是否向浏览器历史栈添加新记录。
router.push：跳转并保留返回能力
调用 router.push() 会向 history 栈中添加一条新记录，用户点击浏览器“后退”按钮可回到上一页。
- 支持字符串路径：
router.push('/user/123') - 支持对象写法（推荐）：
router.push({ path: '/user', query: { id: '123' } }) - 支持命名路由 + 参数：
router.push({ name: 'UserProfile', params: { id: 123 } })（需在路由配置中定义name和props: true或使用params传参） - 注意：
params在path模式下不生效，必须配合name使用
router.replace：跳转并替换当前记录
router.replace() 不新增 history 记录，而是直接替换当前页，因此无法通过“后退”回到原页面——适合登录后跳首页、表单提交成功后跳结果页等场景。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 用法与
push完全一致，只是语义不同：router.replace('/home')或router.replace({ name: 'Success', query: { orderNo: 'NO2024001' } }) - 常见于避免用户重复提交：提交后 replace 到成功页，防止刷新或后退再次触发提交
跳转时处理异步与错误
router 方法返回 Promise，可用于捕获导航失败（如路由守卫中 next(false)、目标路由不存在、异步组件加载失败等）。
立即学习“前端免费学习笔记（深入）”；
- 简单错误处理：
router.push('/admin').catch(err => console.warn('导航被阻止:', err)) - 结合 await 更清晰：注意不要在 setup 中直接 await router.push，应放在事件回调里
- 典型场景：登录后跳转原页面，若权限不足则重定向到 403 页面
router.go、router.back、router.forward 的辅助作用
这三个方法用于基于 history 步长的跳转，使用频率较低但有特定用途：
-
router.back()等价于router.go(-1)，模拟浏览器后退 -
router.forward()等价于router.go(1)，模拟前进 -
router.go(n)可跳转任意步长，比如router.go(-2)直接退两页 - 注意：若历史栈不足（如刚打开页面就调 back），不会报错但无效果
