VueRouter的params和query的区别

个人理解如有偏差欢迎指正

官方文档是和路由一起写的,我个人验证得到就算路由不进行配置,依旧能在下一个页面获取到param以及query的参数

个人测试如下

在router.js配置路由

{ path: '/submit',name:'submit',component: Submit,meta:routeMeta({title:'确认订单',layoutFooter:false,keepAlive: false})}

可看到并没有如官网说的那样配置

然后我在上个页面写一个点击事件

 this.$router.push({ name: 'submit', params: {ids:1,2,3 }})

然后在submit的mounted中打印

 mounted(){
            console.log(this.$route.params)
        }

发现能接受到参数,此时就纠结那么为什么还要向官网那样配置路由,个人又通过不同的测试认为的原因如下:
如果用户刷新当前这个页面就获取不到param参数,如果像官网说的那样配置路由就会在浏览器地址栏中有参数,刷新当前页面依旧能获取

query是不用配置路由在地址栏上依旧能显示参数,刷新当前页面依旧能获取到参数

两者的区别:

query的参数会在地址栏显示(路由未配置参数情况),刷新当前页面依旧能获取

params路由未配置参数情况,参数不会在地址栏显示,在页面能获取,但如果刷新页面就没了

那么问题来了,用query不就好了也不用配置路由的参数,那还要params干嘛,如果不配置路由,不管携带任何参数都能进入,配置了之后只有携带此参数的才能进入

此外还和路由传参props有关https://router.vuejs.org/zh/guide/essentials/passing-props.html

题外注意点:

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值