Vue路由跳转的N种姿势,总有一种适合你!

大家好,我是小杨,一个在前端圈摸爬滚打6年的老油条。今天咱们不聊人生理想,就聊聊Vue里那些让人又爱又恨的路由跳转方式。保证看完这篇,你再也不会在路由跳转上栽跟头!

一、路由跳转的"基本款"

1. 声明式导航 - 优雅的模板写法

html 复制代码
<router-link to="/home">回家</router-link>
<router-link :to="{ path: '/profile' }">我的主页</router-link>

的个人心得:

  • 就像穿衣服,这种写法最"体面"
  • 会自动渲染成<a>标签,SEO友好
  • 支持active-class高亮,做导航菜单特别香

2. 编程式导航 - 灵活的JS操作

javascript 复制代码
// 基本跳转
this.$router.push('/home')

// 带参数跳转
this.$router.push({ path: '/user', query: { id: '123' } })

// 命名路由跳转
this.$router.push({ name: 'user', params: { username: '我' } })

踩过的坑提醒:

javascript 复制代码
// params传参必须用name,不能用path!
this.$router.push({ 
  name: 'user', 
  params: { userId: '007' } // ✅ 正确
})

this.$router.push({
  path: '/user',
  params: { userId: '007' } // ❌ 无效!
})

二、进阶跳转技巧

1. 替换当前路由(不留下历史记录)

javascript 复制代码
this.$router.replace('/login')
// 相当于把当前路由"覆盖"掉

适用场景

  • 登录后跳转,不让用户点返回又回到登录页
  • 表单分步骤提交,不需要回退到上一步

2. 前进后退控制

javascript 复制代码
// 后退一步
this.$router.go(-1)

// 前进两步
this.$router.go(2)

的实战案例:

javascript 复制代码
// 支付完成后禁止返回
paySuccess() {
  this.$router.replace('/success')
  // 再锁死后退按钮
  window.history.pushState(null, null, document.URL)
}

三、特殊跳转场景处理

1. 带参数跳转的三种姿势

javascript 复制代码
// 方式1:query传参(URL可见)
this.$router.push({
  path: '/search',
  query: { keyword: 'Vue' }  // → /search?keyword=Vue
})

// 方式2:params传参(URL不可见)
this.$router.push({
  name: 'user',
  params: { id: 123 }  // → /user/123(需提前配置动态路由)
})

// 方式3:props解耦(推荐!)
{
  path: '/user/:id',
  name: 'user',
  component: User,
  props: true  // 自动将params转为props
}

2. 跳转前确认拦截

javascript 复制代码
this.$router.push({
  path: '/important',
  query: { confirm: true }
}).catch(err => {
  // 用户取消了导航
  if (err.name === 'NavigationDuplicated') {
    alert('别急,已经在当前页啦!')
  }
})

四、小杨的跳转最佳实践

  1. 简单跳转 :直接用<router-link>,省心省力

  2. 复杂跳转:用编程式导航,灵活控制

  3. 参数传递

    • 需要分享URL用query
    • 敏感信息用params
    • 组件复用推荐props
  4. 异常处理:永远记得catch导航错误

最后送大家一个路由跳转拦截的实用代码:

javascript 复制代码
router.beforeEach((to, from, next) => {
  if (to.path === '/vip' && !我.isVip) {
    next('/pay') // 不是VIP?先去充值!
  } else {
    next()
  }
})

今天的路由跳转小课堂就到这里啦!觉得有用的话,别忘了点个赞~有什么问题欢迎评论区交流,看到都会回复的!

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群:906392632

最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!

相关推荐
叫我阿柒啊16 分钟前
Java全栈开发面试实战:从基础到微服务架构
java·vue.js·spring boot·redis·git·full stack·interview
山有木兮木有枝_24 分钟前
从代码到创作:探索AI图片生成的神奇世界
前端·coze
ZXT28 分钟前
js基础重点复习
javascript
言兴36 分钟前
秋招面试---性能优化(良子大胃袋)
前端·javascript·面试
WebInfra2 小时前
Rspack 1.5 发布:十大新特性速览
前端·javascript·github
雾恋2 小时前
我用 trae 写了一个菜谱小程序(灶搭子)
前端·javascript·uni-app
烛阴3 小时前
TypeScript 中的 `&` 运算符:从入门、踩坑到最佳实践
前端·javascript·typescript
Java 码农4 小时前
nodejs koa留言板案例开发
前端·javascript·npm·node.js
ZhuAiQuan4 小时前
[electron]开发环境驱动识别失败
前端·javascript·electron
nyf_unknown4 小时前
(vue)将dify和ragflow页面嵌入到vue3项目
前端·javascript·vue.js