时间戳

首页 > 解决方案 > 看不到 Nuxt / Axios 进度条

javascript - 看不到 Nuxt / Axios 进度条

问题描述

Nuxt / Axios 集成文档很少，至少可以说，但似乎表明 Nuxt 进度条自动与 Axios 集成。但我没有看到它。我有时会在逐页浏览时看到弹出进度条，但在 Axios 获取期间不会。

我的应用是一个 SPA。

难道我做错了什么？我该怎么做才能让它出现？

我在 nuxt.config.js 中的 Axios 配置几乎没有任何内容（只是设置 baseURL 和超时），而在我的页面中，我只是对服务器进行简单的提取：

mounted() {
  this.$axios.get("/users/" + auth.getUser().user_id).then(
    response => {
      this.user = response.data;
    },
    error => {
      util.showAxiosError("Failed to fetch user", error);
    }
  );
}

更新：

如果我在调用 this.$axios.get() 之前手动添加“this.$nuxt.$loading.start()”，则在 Axios 获取期间仍然不会出现进度条。它仅在页面转换期间短暂出现。如果我把这个：

loading: {
  color: "blue",
  height: "5px"
},

根据文档，那么短暂出现的进度条确实具有这种样式。

另一个更新：

如果我this.$nuxt.$loading.start();自己尝试，没有 axios，它确实有效。所以，不知何故 axios 正在关闭它。

标签： javascriptvue.jsaxiosnuxt.js

解决方案

您是否将加载代码放在mounted()生命周期挂钩中？然后它只会出现一次。

另一件事是如果你不知道：

不幸的是，加载组件不可能提前知道加载一个新页面需要多长时间。因此，不可能将进度条准确地设置为加载时间的 100%。

加载栏只是样式，仅此而已。你需要自己告诉你需要多长时间

 this.$nuxt.$loading.start()

和

 this.$nuxt.$loading.end()

推荐阅读