2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > Vue页面之间传递及接收参数方法

Vue页面之间传递及接收参数方法

时间:2018-12-02 09:22:21

相关推荐

Vue页面之间传递及接收参数方法

方法1:使用paragram.js插件

第一步:在页面引入paragram.js插件,(插件分享链接:/s/1jJd4zS6X5KYPusFdDUQ7zg 密码:ru64)

第二步:在methods里面写接收参数的方法,如下:

解析:

1、var contents 和 var times 。是指:接收参数的变量,就是将接收的参数赋值给这两个变量。

2、contents = Request['content']和times = Request['time']; 是指:将接收的参数赋值给变量。等号后边的是接收的参数。

3、this.content = contents 和 this.time = times。是指:将获的参数赋值给data里边定义的变量。

获取参数完毕。

方法2:使用query来传递及接收参数

优点:页面刷新时参数不会丢失

缺点:参数会拼接在路径中(参数过多时路径会很长)

第一步:在methods里边添加点击事件跳转的方法

goPay(index, sid) {this.$router.push({path: '/payment',query: {tit: index,price: this.cost[index].price,sid: sid,}});

解析:

1、goPay是点击跳转的事件,path:'/payment':是需要跳转的下一个页面。

2、query里边的就是跳转之后传递过去的参数,传递之后的参数链接如下:

第二步:到跳转的对应页面去接收参数。

解析:

1、tits、price、sid这三个是在data里边定义好的变量,就是将接受的参数赋值给它们。

2、this.$route.query.tit,是指:查询路径中的tit,

方法三:使用params来传递及接收参数

优点:参数不会拼接在路径中(路径只显示简短的路由比较美观)

缺点:页面刷新时参数会丢失

第一步:在methods里边添加点击事件跳转的方法

this.$router.push({name: 'product-line-detail', // 路径params:{id: id, // 参数1name: name // 参数2}})

第二步:到跳转的对应页面去接收参数。

this.typeId = this.$route.params.id; // 接收参数1并赋值给this.typeIdthis.typeName = this.$route.params.name;console.log(this.typeId);console.log(this.typeName);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。