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

Posted 2023-02-22

【中文标题】NuxtJS - 我想知道如何为特定页面实现加载

【英文标题】：NuxtJS - I want to know how to implement Loading only for specific pages

【发布时间】：2021-02-08 10:59:18

【问题描述】：

我只想在首页显示 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>

【参考方案1】：

你可以这样做：

// your-component.vue

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

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

【讨论】：

我试过了，但只是添加 loading: false 不会禁用它。

【参考方案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，当你访问页面时，它会默认加载 甚至不需要道具

【讨论】：

我想了解一下这个方法，你有示例代码吗？