小编Num*_*chi的帖子

我从这里复制了一些文件：https : //codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/custom-loading? from- embed

• 页面/about.vue
• 页面/index.vue
• 组件/loading.vue

并设置了 nuxt.config.js。见下文。

项目/组件/loading.vue

<template>
  <div v-if="loading" id="loader">
    <p>asdasdasd...</p>
  </div>
</template>

<script>
    export default {
        data: () => ({
            loading: false
        }),
        methods: {
            start () {
                this.loading = true
            },
            finish () {
                this.loading = false
            }
        }
    }
</script>

项目/nuxt.config.js

{
    // ...
    loading: '~/components/loading',
    // ...
}

下一步，我将 setTimeout ms 从 1000 设置为 60000 以进行测试。我在第一次加载时得到了另一个加载页面，而不是components/loading.vue。第二个和另一个加载很好，但不是第一个。

我在 F12 之后看到的，我在项目中找到了它。 项目/.nuxt/loading.html

<style>
#nuxt-loading {
  visibility: hidden;
  opacity: 0;
  position: …