Vue-路由传参的方法与区别

本文详细介绍了Vue中两种主要的路由传参方式:params和query。通过params传递的参数在地址栏不显示,但刷新页面会丢失;而query方式的参数在地址栏可见,刷新后依然保留。此外,还提到了动态路由传参的方式,这种方式的参数会显示在地址栏,刷新页面参数仍然有效,但必须确保路径匹配,否则无法访问。
摘要由CSDN通过智能技术生成

路由传参

1. 通过路由属性中的name来确定匹配的路由,通过params来传递参数
  • 父组件

this.$router.push传递参数

//html
<button @click="toChild"> </button>

//方法
toChild(){
	this.$router.push({
		name:''ChildView",
		params:{
			id : 1,
			age:20,
			···
		}
	})
}
  • 子组件

使用this. r o u t e . p a r a m s . x x x 获 取 数 据 / / 注 意 : 父 组 件 使 用 的 是 route.params.xxx 获取数据 //注意:父组件使用的是

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值