vue路由传参query和params的区别（详解！）

最新推荐文章于 2025-07-07 08:28:04 发布

ii窝窝头

最新推荐文章于 2025-07-07 08:28:04 发布

阅读量2.1k

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_40902181/article/details/106093069

本文详细解析了Vue中使用query和params进行页面间传参的方法。对比了两种方式的配置与接收参数的区别，强调了query的灵活性和params在刷新页面时参数丢失的问题。

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

1.query使用path和name传参跳转都可以，而params只能使用name传参跳转。

query传参：　　

页面带参数跳转：this.$router.push({ path:'/city',name:'City', query: { cityid: this.Cityid,cityname:this.Cityname }})

路由配置：{path:'/city',name:'City',component:City},

接收参数：this.cityid = this.$route.query.cityid;

params传参：

页面带参数跳转：this.$router.push({ name:'City', params: { cityid: this.Cityid,cityname:this.Cityname }})

路由配置：{path:'/city/:cityid/:cityname',name:'City',component:City},

接收参数：this.cityid = this.$route.params.cityid;

2.传参跳转页面时，query不需要再路由上配参数就能在新的页面获取到参数，params也可以不用配，但是params不在路由配参数的话，当用户刷新当前页面的时候，参数就会消失。

也就是说使用params不在路由配参数跳转，只有第一次进入页面参数有效，刷新页面参数就会消失