本地localhost开发模式下NuxtLoadingIndicator不显示求助

我已尝试在Chrome网络设置中进行节流，且将组件的throttle设为0，但在本地localhost开发模式测试时，NuxtLoadingIndicator仍未显示。我已查阅官方文档，是否遗漏了什么关键点？

我的App.vue代码如下：

<template>
    <div>
        <NuxtLoadingIndicator color="#67d360" :throttle="0" />
        <NuxtLayout>
            <NuxtPage />
        </NuxtLayout>
    </div>
</template>

排查关键点： #

• 确认触发场景是否正确
  NuxtLoadingIndicator默认仅在路由页面切换或通过useLoading手动控制时才会显示。单页刷新不会触发它，需要在不同页面间跳转测试。

• 检查nuxt配置是否禁用了指示器
  打开nuxt.config.ts，确认没有设置loadingIndicator: false。如果有这个配置，即使在App.vue中引入组件也不会生效，需移除或设为true。

• 重启开发服务并清除缓存
  本地开发的热更新缓存可能导致组件未正确挂载。尝试重启Nuxt服务，同时在Chrome DevTools中勾选“禁用缓存”后再测试。

• 验证Chrome节流配置
  确保在Chrome“网络”面板选择了有效节流规则（如Slow 3G），且节流状态已生效——可以通过查看资源加载时间确认是否达到足够的延迟，避免加载过快导致指示器来不及显示。

• 手动触发加载状态测试
  在任意页面中添加以下代码，手动控制加载状态，验证组件本身是否正常工作：

  <script setup>
  const loading = useLoading()
  onMounted(() => {
    loading.start()
    setTimeout(() => loading.finish(), 3000)
  })
  </script>
  

  如果手动调用能显示，说明组件没问题，问题出在路由导航的触发逻辑上。

内容的提问来源于stack exchange，提问作者Thomas James Thorstensson