如何根据 vue-router 中的查询参数更新我的数据答案

【问题标题】：How do I update my data based on the query parameter in vue-router如何根据 vue-router 中的查询参数更新我的数据
【发布时间】：2021-02-25 22:09:06
【问题描述】：

我是 vue-router 的新手，我正面临这个问题。这是我的代码；

filter() {
      this.$router.push({
        query: {
          bathrooms: this.selectedBathroom,
          beds: this.selectedBed,
          minPrice: this.selectedMinPrice,
          maxPrice: this.selectedMaxPrice,
          minLandSize: this.selectedMinLandSize,
          maxLandSize: this.selectedMaxLandSize,
          minLotSize: this.selectedMinLotSize,
          maxLotSize: this.selectedMaxLotSize,
          minYear: this.selectedMinYear,
          maxYear: this.selectedMaxYear,
        },
      })
    }

当用户点击过滤器按钮时，过滤器方法被运行。但是数据没有更新，当用户返回上一页时，查询参数被删除，但数据没有更新。他们是我可以解决这个问题的方法吗？

【问题讨论】：

你能澄清更多吗？，当你说数据没有更新时，你指的是参数吗？
我正在根据 params 值发出服务器请求。因此，当调用该方法时，我希望更新来自服务器的数据。

标签： vue.js vue-router router

【解决方案1】：

这里没有path 或name 值来实际启动对页面路由的更改。如果您只想使用一组新的查询参数重新加载现有页面，请参阅the documentation 中的此信息：

注意：如果目的地与当前路由相同并且只有参数发生变化（例如，从一个配置文件转到另一个 /users/1 -> /users/2），则必须使用 beforeRouteUpdate 来响应更改（例如获取用户信息）。

在您的 cmets 中，您提到您正在向服务器发出请求。如果没有来自应用程序的更多代码，很难给出完整的答案，但查询参数可能不是解决问题的最直接方法。您应该探索在您的方法中设置获取请求或使用 axios 与服务器交互（假设您通过 API 进行通信）以构建更可靠和更好的扩展通信模式。

【讨论】：