在 Nuxt 中硬刷新时的 asyncData 钩子

问题描述

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

解决方法

asyncData from the documentation

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

在这种情况下，最好的方法是使用 fetch() 钩子并在您完成调用时显示加载程序，这要归功于 $fetchState.pending 助手。

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

关于该主题的快速文章：https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/
页面底部的（Sergey 的）很酷，还有一些很好的实现的实际示例。

---

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

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

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