vue.js - nuxt watchQuery 无法使用新查询更新路由

Question

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

example.com/some-param ----> example.com/some-param?brand=x (not working watchQuery)

example.com/some-param?brand=x ----> example.com/some-param (correct 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 文档所说 here :

Warning: The new fetch hook introduced in 2.12 is not affected by watchQuery. For more information see listening to query string changes.

我使用以下观察器使 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