四, Vue のthis.$route.params和this.$route.query的传参方式

vue中页面间传递参数方式多种,这里简单介绍常见两张:

  1. this.$route.query

在A页面中, 页面跳转处

this.$router.push({
         path: '/register',
         query:{
               id:"123456",
          }
})

B页面接受参数

this.id= this.$route.query.id

注意:   1. 页面跳转url:  http://172.19.186.224:8080/register?id=123456  (这里url看的到参数的)

              2.  A,B页面传递参数中,两处id命名要一样。

              3.  A,B 页面之间用路由跳转传参时,刷新跳转后传参的页面B页面,数据还会显示存在,即参数id=123456还在

     2. this.$route.params

在A页面中, 页面跳转处

this.$router.push({
	name: 'register',
         path: '/register',
         params:{
               id:"3456",
         }
})

B页面接受参数

this.id=this.$route.params.id

注意: 1. 这里跟上面query传参数方式,多了 name:"register", (如果不加入,会出现 传值为空null现象)

            2.  A,B页面传递参数中,两处id命名要一样, 使用的 params

            3. 页面跳转url:  http://172.19.186.224:8080/register  (这里url看不到参数的)

            4.  A,B 页面之间用路由跳转传参时,刷新跳转后传参的页面B页面,数据不会存在,丢失了,取得id值为空。

所以综上vue页面传值建议是用 query,第一种方式,刷新页面时候参数不会丢失.  (如果想传递参数,在url上不显示,可以推荐使用cookie传递前保存,跳转后页面去取值也可以的。)

  使用就这么简单,Vue项目出现问题,可以 进扣扣群交流:316567839

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值