vue中页面间传递参数方式多种,这里简单介绍常见两张:
-
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