vue路由传参params 与query的区别?

vue3 获取当前页面路由参数 <string>router.currentRoute.value.path

vue路由传参params 与query的区别:

其实是很简单的问题,不过还是踩坑啦。在这里说下

1、 params传参,用name属性对应跳转路径,类似于post提交,参数不会出现在跳转路径里。

<router-link :to="{ name:'cityList' ,params :{cityId:scope.row.id} }">
	<el-button size="mini"  class="button1">{{$t('m.cityList')}}({{scope.row.sum}})</el-button>
</router-link>

子页面接收时:  var cityId = this.$route.params.cityId

2、query传参,用path属性对应跳转路径,类似于get提交,参数是在路径里显示的。

<router-link :to="{ path:'cityList' ,query :{cityId:scope.row.id} }">
	<el-button size="mini"  class="button1">{{$t('m.cityList')}}({{scope.row.sum}})</el-button>
</router-link>

子页面接收时:  var cityId = this.$route.query.cityId

--------------------------------------------------------------------------------------------------------------------------------------------

举例: query传参:   this.$router.push({ path: '/FaultList', query: {sn: sn, carinfoid: carinfoid} })

            params传参:  this.$router.push({ name:'FaultList', params: {sn:sn, carinfoid: carinfoid} })

            query要用path来引入,params要用name来引入,接受的参数都是类似的,分别是:

this.$route.query.sn                 注意:接收参数的时候已经是$route而不是$router啦。

this.$route.params.sn              注意:接收参数的时候已经是$route而不是$router啦。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值