如何知道nuxt 3中完成的所有请求

Question

我想制作自定义加载页面，

加载所有请求或静态数据（例如（静态图像 - 某些库））后，我想隐藏加载页面。

那么我如何检查请求和静态数据是否已加载或完成？

我正在尝试这段代码，但对我不起作用

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

<script setup>
const nuxtApp = useNuxtApp();
const loading = ref(false);
nuxtApp.hook("page:start", () => {
  loading.value = true;
});
nuxtApp.hook("page:finish", () => {
  loading.value = false;
});
</script>

Answer 1

你尝试过这样的事情吗？

注意：这仅适用于静态文件请求。

<template>
  <div>
    {{ loading }}
    <NuxtPage />
  </div>
</template>

<script setup lang="ts">
const nuxtApp = useNuxtApp()
const loading = ref(true)
nuxtApp.hook("page:finish", () => {
  loading.value = false
})
</script>