Nuxt3自定义路由切换加载指示器不显示问题求助

问题根源 #

1. 组件命名不匹配：你创建的组件文件名为CustomComponent.vue，但在app.vue中使用的是CustomLoader，Nuxt自动导入组件基于文件名识别，导致组件未被正确加载。
2. 未传入必填props：自定义组件要求传入isLoading属性，但模板中未传递该值，组件无法判断是否显示。
3. 状态未关联：你定义了loading变量并通过钩子更新，但模板中未使用该状态，反而错误绑定了未关联的$nuxt.isLoading。

修复步骤 #

1. 修正组件文件名

将/components/CustomComponent.vue重命名为/components/CustomLoader.vue，确保组件名与使用时的名称一致（Nuxt自动导入会将文件名转为PascalCase作为组件名）。

2. 修改app.vue代码

选择以下两种方案之一：

方案一：使用Nuxt内置状态
直接利用Nuxt提供的$nuxt.isLoading内置状态，无需手动管理：

<template>
  <CustomLoader :isLoading="$nuxt.isLoading" />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

方案二：使用自定义状态
如果需要更灵活的控制逻辑，保留手动状态管理，修改模板绑定并传入props：

<template>
  <CustomLoader :isLoading="loading" />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts">
const nuxtApp = useNuxtApp();
const loading = ref(false);

nuxtApp.hook("page:start", () => {
  loading.value = true;
});

nuxtApp.hook("page:finish", () => {
  loading.value = false;
});
</script>

3. 可选优化

组件内部的v-if="isLoading"可以保留，也可以移除并在父组件通过v-if控制显示，两种方式均有效。

验证 #

修改完成后切换路由，自定义加载器应该能正常显示/隐藏。若仍有问题，可检查：

• 组件是否在components目录下，或手动导入组件验证（import CustomLoader from '~/components/CustomLoader.vue'）。
• 浏览器控制台是否有组件未找到、props缺失等报错信息。

内容的提问来源于stack exchange，提问作者juancho perez