<NuxtLoadingIndicator>
显示页面导航之间的进度条。
用法
在您的 app.vue 或 layouts/ 中添加 <NuxtLoadingIndicator/>。
app.vue
<template>
<NuxtLoadingIndicator />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
Read and edit a live example in Docs > Examples > Routing > Pages.
插槽
您可以通过加载指示器的默认插槽传递自定义 HTML 或组件。
属性
color: 加载条的颜色。可以设置为false来关闭显式颜色样式。errorColor: 当error设置为true时，加载条的颜色。height: 加载条的高度，以像素为单位（默认3）。duration: 加载条的持续时间，以毫秒为单位（默认2000）。throttle: 以毫秒为单位控制出现和隐藏（默认200）。estimatedProgress: 默认情况下，Nuxt 在接近 100% 时会逐渐减慢。您可以提供一个自定义函数来自定义进度估计，该函数接收加载条的持续时间（上面）和已过时间。它应该返回一个介于 0 和 100 之间的值。
此组件是可选的。
为了实现完全自定义，您可以根据 其源代码 实现自己的一个。
为了实现完全自定义，您可以根据 其源代码 实现自己的一个。
您可以使用
useLoadingIndicator 组合 钩入基础指示器实例，这将允许您自行触发开始/完成事件。加载指示器的速度在达到特定点后逐渐减慢，该点由
estimatedProgress 控制。这种调整提供了更准确的长时间页面加载时间的反映，并防止指示器过早地显示 100% 完成。