Vue Router编程式导航核心方法为router.push、router.replace和router.go：push添加新历史记录可回退，replace替换当前记录不可回退，go按步长前进或后退。
Vue Router 提供了编程式导航能力，让你可以在 JavaScript 中控制路由跳转，而不依赖 `router.push、router.replace 和 router.go，它们分别对应浏览器历史记录的“添加新条目”、“替换当前条目”和“前进/后退”。理解它们对避免重复入栈、防止回退到错误页面、实现返回逻辑等场景至关重要。
push：向历史栈添加新记录（可回退）
router.push() 是最常用的导航方式，它会在浏览器历史栈中新增一条记录，用户点击浏览器“后退”按钮时可以回到上一个页面。
- 支持多种传参形式：字符串路径、对象（含 path 或 name）、带查询参数的对象
- 不会替换当前页，适合常规跳转，比如从列表页进入详情页
- 调用后会触发路由守卫（如
beforeEach），可用于权限校验或加载提示
示例：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
router.push({ name: 'User', params: { id: '123' } })
router.push({ path: '/search', query: { q: 'vue' } })
replace：替换当前历史记录（不可回退）
router.replace() 不新增历史条目，而是直接用目标路由覆盖当前记录。用户点击“后退”时会跳过这次跳转，回到上上个页面。
- 常用于登录后跳转首页、表单提交成功后重定向、404 页面跳转等不希望被回退的场景
- 行为类似
- 同样支持字符串、对象等参数格式，用法与
push几乎一致
示例：
router.replace('/home')router.replace({ name: 'NotFound', params: { pathMatch: '/unknown' } })
go：基于步长在历史栈中移动（模拟浏览器前进/后退）
router.go(n) 接收一个整数参数 n，表示在历史记录中前进（正数）或后退（负数）多少步，相当于调用 history.go(n)。
-
router.go(-1)等价于浏览器“后退”，router.go(1)等价于“前进” - 若步数超出历史栈范围，静默失败（不会报错，但无反应）
- 适合封装自定义“返回上一页”按钮，尤其在需要兼容非 Vue 页面跳转来的场景
小技巧：可用 router.back() 替代 router.go(-1)，语义更清晰；router.forward() 同理。
注意事项与常见陷阱
编程式导航是异步操作，返回一个 Promise（在 Vue Router 4+ 中默认返回 Promise，失败时会 reject）。未处理错误可能导致跳转失败却无感知。
- 建议在
push或replace后加.catch(err => { /* 处理导航取消或守卫拦截 */ }) - 重复调用相同路由（如已处于 /user/123，又 push /user/123）默认会被忽略，可通过
scrollBehavior或组件内watch $route捕获变化 - 在路由守卫中调用导航方法需谨慎，避免无限循环（例如
next('/login')后又触发同一守卫）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
