在 Nuxt 3 应用程序中的页面之间导航时不显示加载微调器

Question

我有一个 Nuxt 3 + Vue 3 应用程序。我有2页

1. pages/index.vue

   文件作为我的主页

2. pages/folder1/folder2/[dynamic_route].vue

从我的主页导航到其他页面时，我的加载微调器不会立即显示。最初，页面停留在主页上，一段时间后，当它实际导航到第二页时，加载旋转器会短暂显示并显示图表。

我希望在导航到其他页面时立即显示加载微调器。然而，这不是它的工作方式。

问题：如何让加载微调器在导航到其他页面时立即显示。

注意：我在此页面中使用了 3 个 API 调用，这里我只显示了一个。不确定这是否导致该问题。

下面是我的代码：

nuxt.config.ts

文件具有使该页面客户端渲染的路由规则。

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ...  
  routeRules: {
    "@/pages/folder1/folder2/**": { ssr: false },
  },
  ...
});

pages/index.vue

主页：

<template>
  <div>
    <h1>Please standby for more products!</h1>
  </div>
</template>

pages/folder1/folder2/[dynamic_route].vue

页面

<template>
  <div>
    <div v-if="loading" class="loader">Loading...</div>

    <div v-else class="chartSection">
      <div v-if="!error && !pending" class="chart">
        <ApexchartsLineChart :top20-items="top20Items" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { createError } from "h3";
definePageMeta({ middleware: "auth" });

const baseURL = `/api/proxy/some_path`;
const route = useRoute();
const dynamicRoute = route.params.dynamic_route;

const loading = ref(true);
onMounted(() => {
  setTimeout(() => {
    loading.value = false;
  }, 300);
});

// Fetch data
const {
  data,
  error,
  pending,
} = await useFetch(`${baseURL}/another_path/${dynamicRoute}`);

if (error?.value || !data?.value) {
  throw createError({
    message: "Error in data section",
    statusCode: error.value?.statusCode,
    statusMessage: error.value?.statusMessage,
    fatal: true,
  });
}

const top20Items = JSON.parse(JSON.stringify(data?.value?.slice(0, 20)));
</script>

<style scoped lang="scss">
@import "@/assets/styles/loaders/loadingDotsSpinner.scss";
@import "@/assets/styles/pages/chartPage.scss";
</style>

Answer 1

onMounted

在这里不会这样工作，因为当它被允许挂载时，API已经加载，因为顶级等待是在挂起组件挂载方法的API调用上，你应该调用API在

onMounted

内部，以便您的加载指示器有机会像这样实际渲染：

loading.value = true

onMounted(async () => {
  const { data, error, pending,} = await useFetch(...);

  ...

  loading.value = false;
});

但是...由于您已经有了顶级脚本

await

，您应该能够利用内置的 Nuxt 加载指示器并抛弃加载引用概念：

https://nuxt.com/docs/api/components/nuxt-loading-indicator#nuxtloadingindicator

还要确保您使用的是 Nuxt 版本

3.5.1+

，因为过去几周修复了一些有关悬念的错误。

Answer 2

我假设您正在使用

NuxtLoadingIndicator

组件。 就像下面的代码一样：

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

我建议您将

NuxtLoadingIndicator

组件的油门从默认

200

配置为更少的值（甚至

0

）。

因为https://nuxt.com/docs/examples/routing/pages说“以毫秒为单位限制显示和隐藏（默认200）。 ”