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中引入的新获取挂钩不受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-要查询字符串更改