Nuxt：asyncData({ $axios }) 调用在部署中的工作方式与在 localhost

问题描述

我开发了一个使用多个 asyncData({ $axios }) 调用的 Nuxt.js 应用程序。在开发模式下，这些调用有效。在部署中，大部分调用都有效。但是，有时它们似乎只有在“返回到”页面后才能工作，即通过推回浏览器。此时，数据会填充并且页面按预期显示。在页面被“返回”之前，即当它第一次被访问时，没有进行调用，通过 console.log("in asyncData") 没有出现在控制台中进行验证。 这是调用的代码（同样，这在开发模式下工作正常）：

async asyncData({ $axios }) {
  try {
    let dogsResponse = await $axios.$get("/api/dogs");
    
    console.log("inside asyncData");
    console.log("dogsResponse",dogsResponse);

    return {
      dogs: dogsResponse.dogs,}
  } catch (err) {
    console.log(err.message)
  }
},

您可以通过在 cal-dog-run.herokuapp.com 访问我的网站并使用以下凭据登录来查看实际情况。 登录：[e-mail] 密码：aa

-->点击查看个人资料

-->点击'bb'的图片

-->此页面 (/dogProfile?dog=bb) 应通过 asyncData 调用和一些其他工作代码显示此狗的信息（图像和有关所有约会的信息）。此时它只显示模板。如果您然后单击“为 bb 安排约会”，它将带您使用不同的 vue，并且该 vue 上的 asyncData 调用会适当地触发并填充图像。如果您然后单击浏览器上的“后退”，并返回到 (/dogProfile?dog=bb)，现在 asyncData 会触发并使用图像和约会信息适当地填充页面，以及 console.logs 'inside asyncData' 和 'dogsResponse .

如果您能了解为什么会发生这种情况，我将不胜感激，谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）