vue 路由传参 params 与 query两种方式的区别

初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query。然后,错误就这么来了:

router文件下index.js里面,是这么定义路由的:

{
      path:"/detail",
      name:"detail",
      component:home
    }

我想用params来传参,是这么写的,嗯~

this.$router.push({
 path:"/detail",
 params:{
 name:'nameValue',
 code:10011
 }
});

结果可想而知,接收参数的时候:

this.$route.params.code     //undefined

这是因为,params只能用name来引入路由,下面是正确的写法:

this.$router.push({
   name:"detail",
   params:{
    name:'nameValue',
    code:10011
 }
});

1、用法上的

刚才已经说了,query要用path来引入,params要用name来引入,接收参数都是类似的,分别是
  this. r o u t e . q u e r y . n a m e 和 t h i s . route.query.name 和 this. route.query.namethis.route.params.name

注意接收参数的时候,已经是 r o u t e 而 不 是 route而不是 routerouter了哦!!

2、展示上的

query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示

query:
params:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值