没有看到 Nuxt / Axios 进度条

Question

Nuxt / Axios integration documentation 是稀疏的，至少可以这么说，但似乎暗示 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"
},

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

另一个更新：

如果我在没有 axios 的情况下单独尝试 this.$nuxt.$loading.start();，它确实工作。所以，不知何故，axios 正在关闭它。

Answer 1

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

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

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

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

 this.$nuxt.$loading.start()

和

 this.$nuxt.$loading.end()