router.push 是 vue router 实现编程式导航的核心方法，支持字符串路径、对象写法（path+query 或 name+params）、replace/force 控制及相对路径跳转，并返回 promise 用于错误处理与异步保障。
Vue Router 的 router.push 是实现页面跳转最常用的编程式导航方法，它会在浏览器历史中新增一条记录，支持后退返回。
基础跳转：字符串路径
最简单的方式是传入一个字符串路径，适合无参数的静态跳转：
-
this.$router.push('/home')（Vue 2） -
router.push('/login')（Vue 3，配合useRouter()） - 注意 URL 中不要在
?后加空格，'/user?id=123'✅，'/user? id=123'❌
带参数跳转：对象写法更灵活
传入对象可精确控制路径、参数和查询条件，推荐在复杂场景下使用：
- 用
path+query：跳转并附带 URL 查询参数，如{ path: '/order', query: { status: 'paid' } }→/order?status=paid - 用
name+params：需配合命名路由定义，如{ name: 'user', params: { id: '88' } }→/user/88（前提是路由配置了path: '/user/:id'） - ⚠️ 关键限制：
params与path不能共存，若写了path，params会被忽略；必须改用name或拼接完整路径
特殊行为控制
通过额外属性调整导航行为：
-
replace: true：不新增历史记录，等价于点击<router-link replace></router-link>，后退时跳过当前页 -
force: true：强制刷新当前相同路由（例如刷新数据），避免 Vue Router 的复用优化 - 相对路径支持：当前在
/user/123/profile时，router.push('posts')跳到/user/123/posts，router.push('../info')跳到/user/123/info
错误处理与异步保障
router.push 返回 Promise，可用于捕获导航结果：
- 成功时执行后续逻辑：
router.push('/dashboard').then(() => { /* 加载完成 */ }) - 失败时判断原因：
.catch(err => { if (err.name === 'NavigationDuplicated') { /* 重复跳转，可忽略 */ } }) - 适用于登录后跳转、表单提交后重定向等需要确认跳转成功的场景
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
