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'
},

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

但是，如果我在网址 http：//localhost：8080？status=1 上并且我按提交按钮没有任何反应。我必须选择另一个值(例如 2(才能重新加载。

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

Answer 1

由于您不会在提交时更改查询参数，因此 Vue 不会检测到更改，也不会分别重新加载您的组件。对于您的情况，我建议您直接从您提交表格的地方致电您的loadOrders。

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