nuxt watchQuery 无法使用新查询更新路由

Question

当我使用 $router.push 添加新查询来路由 Nuxt watchQuery 不起作用并且 asyncData 不获取 api 并重新挂载子组件时。请注意“新查询”，默认情况下不存在任何查询。（创建新查询然后存在查询后，一切都是正确的，并且 watchQuery 工作正常。）

example.com/some-param ----> example.com/some-param?brand=x （不工作 watchQuery）

example.com/some-param?brand=x ----> example.com/some-param（正确的 watchQuery）

change_brand: function () {
  const vm = this;
  /*** selected_brands = [] is an array defined in data ***/
  let q = { ...vm.$route.query };
  if (vm.selected_brands.length > 0) {
    q.brands = vm.selected_brands.join("-");
  } else {
    delete q.brands;
  }
  vm.$router.push({
    name: "search-slug",
    params: vm.$route.params,
    query: q,
  });
},

Answer 1

正如 Nuxt 文档所说：

警告：2.12 中引入的新 fetch hook 不受 watchQuery 影响。有关详细信息，请参阅侦听查询字符串更改。

我使用以下观察程序使 fetch hook 监听路由查询更改：

export default {
  watch: {
    '$route.query': '$fetch'
  },
  async fetch() {
    // Called also on query changes
  }
}

参考： https: //nuxtjs.org/docs/2.x/features/data-fetching#listening-to-query-string-changes