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

Posted 2023-02-23

【中文标题】nuxt watchQuery 无法使用新查询处理更新路由

【英文标题】：nuxt watchQuery not working on update route with new query

【发布时间】：2021-01-27 05:30:47

【问题描述】：

当我使用 $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,
  );
,

【问题讨论】：

你检查过这个nuxtjs.org/api/pages-watchquery!!

是的。我知道这一点，我的问题是为什么它对向路由添加新查询没有反应。如果查询存在，一切都是正确的。（我不确定，但我认为这是 nuxt 的一个大错误）

问题通过使用 $router.push(path: $route.path, query: q) 而不是 $router.push( name: "search-slug", params: vm. $route.params, 查询：q, );

【参考方案1】：

正如 Nuxt 文档所说here：

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

我使用下面的 watcher 让 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