<NuxtLoadingIndicator>

在页面导航之间显示进度条。

用法

在你的 app.vue 或 app/layouts/ 中添加 <NuxtLoadingIndicator/>。

app/app.vue

<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

你可以通过加载指示器的默认插槽传入自定义 HTML 或组件。

color：加载条的颜色。可以设为 false 以关闭显式颜色样式。
errorColor：当 error 设为 true 时加载条的颜色。
height：加载条的高度，单位像素（默认 3）。
duration：加载条的持续时间，单位毫秒（默认 2000）。
throttle：显示与隐藏的节流时间，单位毫秒（默认 200）。
estimatedProgress：默认情况下，Nuxt 会在接近 100% 时放缓。你可以提供一个自定义函数来调整进度估算，该函数接收加载条持续时间（如上）和已用时间，应返回 0 到 100 之间的值。

该组件是可选的。:br 要实现完全自定义，你可以基于其源码实现你自己的版本。 :

你可以使用 the useLoadingIndicator 组合式函数钩入底层的指示器实例，它允许你自行触发开始/结束事件。 :

加载指示器的速度在达到由 estimatedProgress 控制的特定点后会逐渐减慢。这种调整更准确地反映了较长的页面加载时间，并防止指示器过早显示完成 100%。 :