NuxtJS - 我想知道如何为特定页面实现加载

Question

我只想在首页显示 Nuxt Loading 组件，但它会显示在所有页面上。不能只在访问特定页面时显示吗？

此外，页面将在加载屏幕开始之前立即输出。你知道是什么原因造成的吗？

nuxt.config.js

export default {
  ..
  loading: '@/components/Organisms/PageLoading.vue',
  ..
}

layouts/default.vue

<template>
  <div>
    <org-page-loading />
  </div>
</template>

<script>
  import PageLoading  from "../components/Organisms/PageLoading";
  
  export default {
    name: "Default",
    components: {
      "org-page-loading": PageLoading,
    },
    mounted() {
      this.$nextTick(() => {
        this.$nuxt.$loading.start()
        setTimeout(function () {
          this.$nuxt.$loading.finish()
        }, 2400)
      })
    },
  }
</script>

Answer 1

你可以这样做：

// your-component.vue

<template>
  <h1>My  Custom page</h1>
</template>

<script>
  export default {
    loading: false
  }
</script>

Answer 2

所以首先$nextTick 可能会让你的页面在加载之前显示出来。
其次我从来没有使用过这种加载组件，但是如果你制作自己的加载组件，你可以动态传递一个 prop 给它，它告诉它你想要它在哪个页面上，如果 url 不匹配，或者组件名称不匹配不会显示

<your-custom-loading :page="routerLinkYouWantItToBeShownOn" />

编辑： 我找到了一个更好的解决方案： 这是微调器/加载组件

<template>
    <div class="spinner"></div>
</template>

<style lang="css">
    .spinner {
        position: absolute;
        height: 60px;
        width: 60px;
        border: 3px solid transparent;
        border-top-color: var(--v-success-base);
        top: 50%;
        left: 50%;
        margin: -30px;
        border-radius: 50%;
        animation: spin 2s linear infinite;
        z-index: 100;

        &:before,
        &:after {
            content: '';
            position: absolute;
            border: 3px solid transparent;
            border-radius: 50%;
        }

        &:before {
            border-top-color: var(--v-error-base);
            top: -12px;
            left: -12px;
            right: -12px;
            bottom: -12px;
            animation: spin 3s linear infinite;
        }

        &:after {
            border-top-color: var(--v-accent-lighten1);
            top: 6px;
            left: 6px;
            right: 6px;
            bottom: 6px;
            animation: spin 4s linear infinite;
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>

你是这样称呼它的：

<template>
    <div>
    <loading> v-if="isLoading" />
    <div v-else>Your other content</div>
    </div>
</template>

<script>
    import Loading from '@/components/Loading';

    export default {
        components: {
            Loading
        },
    computed: {
        isLoading(){
           return "your condition for loading"
        }
    },
</script>

你可以使用一个数据变量来加载isloading，默认设置为true，当你访问页面时，它会默认加载 甚至不需要道具