在 Nuxt 中硬刷新时的 asyncData 钩子

Posted

技术标签:

【中文标题】在 Nuxt 中硬刷新时的 asyncData 钩子【英文标题】:asyncData hook when hard refreshing in Nuxt 【发布时间】:2021-07-26 17:01:21 【问题描述】:

我刚刚意识到在硬刷新页面时不会调用 asyncData 挂钩。但我有重要数据要加载以显示在该页面上。而且我想确保它们始终可用,即使用户硬刷新页面也是如此。

【问题讨论】:

【参考方案1】:

asyncDatafrom the documentation

asyncData 钩子返回的承诺在路由转换期间被解析

在这种情况下,最好的方法是使用 fetch() 挂钩并在您完成调用时显示加载程序,这要感谢 $fetchState.pending 帮助器。

实际上,我确实认为fetch() 在很多方面都更好。

关于该主题的快速文章:https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/ 页面底部的那个(Sergey's)很酷,还有一些很好的实现示例。


您还可以在布局中使用这个有点老套的解决方案来查看初始位置(您在硬刷新时所处的位置)是否是您想要的位置。基本上,如果您登陆特定页面(例如硬刷新或跟随新窗口页面)但想要一些自定义行为。

beforeCreate() 
  if (!['some-other-page'].includes(this.$router.history._startLocation)) 
    this.$router.replace( name: 'index' ).catch(() => )
  
,

不过,如果在中间件中使用这个无限循环(或者我犯了一个错误),它不如 fetch() 钩子干净。

【讨论】:

以上是关于在 Nuxt 中硬刷新时的 asyncData 钩子的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Nuxt 的 asyncData 中重定向

“默认 Apollo 查询”VS “AsyncData”(Nuxt.js)

如何使用 Nuxt 访问 asyncData 中的数据

nuxt.js中asyncData 方法能够在渲染组件之前异步获取数据

如何测试 nuxt.js asyncData 并获取钩子

用nuxt asyncData