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并确定无效。

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

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

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

但是，如果我在网址http://localhost:8080?status=1上，而我按提交按钮则不会发生任何事情。我必须选择另一个值（例如2）才能重新加载。

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

Answer 1

由于您在提交时不会更改查询参数，因此Vue不会检测到更改，也不会重新加载您的组件。 对于您的情况，我建议您直接从提交表单的位置拨打loadOrders。

单击“提交”并尝试不依赖路径时发出事件。 https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication