创新项目实训（五）

在写搜索界面的过程中，我遇到了这样一个问题。

我的搜索流程是在搜索界面输入完条件并点击搜索按钮后，会跳转到另一个页面显示结果，因此用户输入的数据被在记录第一个页面中，而前端对后端数据的请求会在另一个页面中。这也就意味着获取数据和请求数据的操作分别要在两个页面中进行，而这显然是不好实现的。

为了将这两个操作合二为一，我需要在两个页面中传递参数。

传参的方法并不难。首先，我尝试了param方式，也就是在跳转方法中加入param：

this.$router.push({
        name: "tickets",
        param: {
          departure: this.ruleForm.departure,
          destination: this.ruleForm.destination,
          date1: String(this.ruleForm.date1),
          date2: String(this.ruleForm.date2),
          radio: this.ruleForm.radio,
          type: this.ruleForm.type,
        },
});

在跳转到的页面调用数据时，只要使用this.$route.param.XXX即可。

mounted() {
    this.params.departure = this.$route.param.departure;
    this.params.destination = this.$route.param.destination;
    this.params.date1 = this.$route.param.date1;
    this.params.date2 = this.$route.param.date2;
    this.params.radio = this.$route.param.radio;
    this.params.type = this.$route.param.type;
    console.log(this.params);
    this.onSubmitGet();
  }

这样确实达到了我想要的传参的目的，但很快我就发现了一个很重要的问题。如果对这个页面进行刷新的话，传递的参数会消失，也就无法向后端请求正确的数据了。这显然是不合适的。于是，我采用了另外一种传参方式，也就是query方式。它的使用很简单，把上面的param替换为query就可以了。

query和param不同的地方在于，query的参数是通过路由传递的，也就是说新网页的网址其实是由原来的网址加上query所传递的所有参数组成的，就像此时此刻这篇博客的网址构成一样。因为在网页刷新时网址并不会改变，所以参数也就被保留了下来，这里也就造成了一个漏洞，即可以通过直接更改网址中参数值的形式来访问网页。但鉴于这只是一个搜索网页，导致的后果也只可能是搜索不出结果，因此我还是选用了这种方法。