vue 路由跳转传参

最新推荐文章于 2025-05-21 13:59:41 发布

静默思想

最新推荐文章于 2025-05-21 13:59:41 发布

阅读量227

点赞数

CC 4.0 BY-SA版权

分类专栏： vue js

53 篇文章

订阅专栏

19 篇文章

订阅专栏

本文详细介绍了在Vue中使用三种不同的方法进行路由传参：直接跳转、使用params传参和使用query传参。每种方法都有其特点，如params传参不会在URL中显示，而query传参则会在URL中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

正常跳转

this.$router.push('/index');

1带参

　　toOrderDetail() {
　　  let orderUuid = this.order.uuid;
　　  this.$router.push({path: `/orderDetail/${orderUuid}`});
　　}
　路由配置

　　path: '/orderDetail/:orderUuid',    在path后面加 /:xxxx
　　name: 'orderDetail',　　　　　　　　　　再加个name

　接值

　　this.$route.params.orderUuid // 在orderDetail页里面直接接收

2.params传参
　　this.$router.push({
 　　name: ‘orderDetail, // 这里通过name来引入router

 　　params:{
　　 　　id:this.uuId
　　 }
　　});

　　路由配置
　　　　需要name：‘orderDetail’

　　this.$route.params.id  // 在页面直接接收

3.query把params的name 换成path

　　this.$router.push({
 　　　　path: '/orderDetail',

 　　　　query:{

　　　　 　　id:this.uuId
　　　　 }
　　});

　　this.$route.query.id //这样接收

最后：
　　query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.id和this.$route.params.id。
　　query在地址栏中有显示的
　　params不显示的