Vue 路由器 - 处理查询参数

Question

我有一个<search-bar> 组件，它有一些我将用作过滤器搜索的下拉列表。当我按下submit 按钮时，我运行以下代码：

search() {
  let query = {
      status: this.selectedOrderStatus
  };

  this.$router.push({ path: '/', query: query })
}

这会将我的网址更改为：http://localhost:8080?status=1 或 http://localhost:8080?status=2 并且可以。

在另一个组件（即/ 组件）中，我放置了一个手表来处理 url 更改，如下所示：

watch: {
 '$route': 'loadOrders'
},

所以，当我在下拉列表中选择一个值时，组件会重新加载。

但是，如果我在 url http://localhost:8080?status=1 上并且我按下 提交按钮 什么都不会发生。我必须选择另一个值（例如 2）来重新加载。

每次按下提交按钮时如何处理重新加载？因为，我想再次按“提交”，使用相同的参数。

Answer 1

由于您在提交时没有更改查询参数，因此 Vue 不会检测到更改并且相应地不会重新加载您的组件。 对于您的情况，我建议您直接从您提交表单的位置致电您的loadOrders。

点击提交时发出一个事件，尽量不要依赖路由。 https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication