<NuxtLoadingIndicator> · Nuxt 组件

用法

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

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 之间的值。

此组件是可选的。
为了实现完全自定义，您可以基于它的源代码实现您自己的组件。

您可以使用 useLoadingIndicator 可组合项钩入底层指示器实例，这将允许您自己触发开始/结束事件。

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

Nuxt 提供了 <NuxtLink> 组件来处理应用程序中的任何类型的链接。

<NuxtErrorBoundary> 组件处理其默认插槽中发生的客户端错误。