记vue+drf前后端分离学习过程（2）

后端分离学习过程（2）"/>

记vue+drf前后端分离学习过程（2）

主要内容：页面间相互传参

页面之间相互传参我目前使用的方法有两种，这里分别说一下：

1. 直接传参：

假设有页面A和页面B，现在需要页面A给页面B传参，那么：

页面A：

再method方法中写入一个函数，加上下面这段跳转页面的函数

 this.$router.push({    //跳转页面path: '/experiment/poetry/experiment_report',  //跳转页面地址query: {     //需要传递的参数变量teacher_experiment_id: this.experiment_fre.teacher_experiment_id}})

页面B：

在created或mounted函数中写入：

 this.teacher_experiment_id = this.$route.query.teacher_experiment_id;

注意后面的query.teacher_experiment_id一定要与页面A中的键值一样，这样即可获得上一个页面传递的参数。

需要注意的是，这样传参可能会导致一个问题就是，如果刷新了页面，那么上个页面传递过来的参数可能会丢失，这样的话就需要重新回到上个页面重新进来，会比较麻烦，而下面要介绍的第二种方法就可以完美解决这个问题。

2. 利用cookie间接传参：

也可以使用cookie间接传参，具体cookie的使用方法我在之前的文章里讲过，具体可以参考下面的链接：

这样我们就只需要在页面A的method中写入：

this.$cookies.set('experiment', data)

然后在页面B的created或mounted中写入：

    this.experiment_fre = this.$cookies.get("experiment");

这样即可。

如果使用这个方法，那么刷新页面也不会导致数据丢失，使用起来会更加合适。