方法1:使用paragram.js插件
第一步:在页面引入paragram.js插件,(插件分享链接:https://pan.baidu.com/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, // 参数1
name: name // 参数2
}
})
第二步:到跳转的对应页面去接收参数。
this.typeId = this.$route.params.id; // 接收参数1并赋值给this.typeId
this.typeName = this.$route.params.name;
console.log(this.typeId);
console.log(this.typeName);