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

方法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);