在 Nuxt 3 应用程序中添加页面加载器：分步指南

Question

我正在使用 Nuxt 3 构建一个应用程序，我想添加一个页面加载器，直到网站加载。

Answer 1

根据这篇文章。有一种简单但有限的解决方案和一种完全定制的解决方案。

内置

包含一个加载进度条，可以像这样使用

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

但它只有一个预定义的 UI，并且只能使用这几个属性进行自定义

• 颜色：加载栏的颜色。
• 高度：加载栏的高度，以像素为单位（默认值为 3）。
• 持续时间：加载栏的持续时间，以毫秒为单位（默认值为 2000）。
• 限制：限制显示和隐藏，以毫秒为单位（默认为 200）。

可定制的加载器

如果您需要自定义加载程序（例如带背景的全屏旋转器），则需要不同的方法。这种方法允许您创建任何加载程序并在需要时显示它。

<template>
  <div class="h-screen">
    <div v-if="loading" class="fixed left-0 top-0 h-0.5 w-full z-50 bg-green-500" />

    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</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>

Nuxt3 提供了应用程序运行时挂钩，其中包含用于 page:start 和 page:finish 事件的拦截器。要正确使用它们，您需要以这种方式使用这些钩子（在 app.vue 或您的自定义组件中）：