在 Nuxt 中硬刷新时的 asyncData 钩子
Posted
技术标签:
【中文标题】在 Nuxt 中硬刷新时的 asyncData 钩子【英文标题】:asyncData hook when hard refreshing in Nuxt 【发布时间】:2021-07-26 17:01:21 【问题描述】:我刚刚意识到在硬刷新页面时不会调用 asyncData 挂钩。但我有重要数据要加载以显示在该页面上。而且我想确保它们始终可用,即使用户硬刷新页面也是如此。
【问题讨论】:
【参考方案1】:asyncData
from 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 钩子的主要内容,如果未能解决你的问题,请参考以下文章
“默认 Apollo 查询”VS “AsyncData”(Nuxt.js)