vue之this.$route.query和this.$route.params的区别

本文详细解析了Vue中使用$router.push进行路由传参的方法,包括通过query和params方式传递参数的区别,以及如何在目标页面中正确获取这些参数。探讨了参数在URL中的表现形式,以及在页面刷新后参数的存在与否,帮助开发者更好地理解和应用Vue路由传参。

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

1.this.$route.query的使用

A、传参数:

this. r o u t e r . p u s h ( p a t h : ′ / m o n i t o r ′ , q u e r y : i d : i d , ) B 、 获 取 参 数 : t h i s . router.push({ path: '/monitor', query:{ id:id, } }) B、获取参数: this. router.push(path:/monitor,query:id:id,Bthis.route.query.id
C、在url中形式(url中带参数)
http://172.19.186.224:8080/#/monitor?id=1
D、页面之间用路由跳转传参时,刷新跳转后传参的页面,数据还会显示存在(项目中遇到此问题)

2.this.$route.params的使用
A、传参数:

this. r o u t e r . p u s h ( n a m e : ′ m o n i t o r ′ , p a r a m s : i d : i d , ) B 、 获 取 参 数 : t h i s . router.push({ name: 'monitor', params:{ id:id, } }) B、获取参数: this. router.push(name:monitor,params:id:id,Bthis.route.params.id
C、在url中形式(url中不带参数)
http://172.19.186.224:8080/#/monitor
D、页面之间用路由跳转传参时,刷新跳转后传参的页面,数据不存在(项目中遇到此问题)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值