在 Nuxt 中硬刷新时的 asyncData 钩子答案

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

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

【问题讨论】：

标签： vue.js nuxt.js 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() 钩子干净。

【讨论】：