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

酷瑶大大_8716

酷瑶大大_8716

2026-04-10

328人浏览

原创

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

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

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-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习