vue.js - 在nuxt中加载页面时如何显示组件

Question

我对nuxt很陌生，在这里我需要帮助。

async asyncData({ params, route }) {
    const { data } = await axios.get(
      `${process.env.baseUrl}/homes/?search=${
        params.search
      }&home_status=${1}`
    )
    return {
      homes: data.results,
    }
  }

我正在尝试用数据填充我的组件(使用 asyncData)，但我希望我的骨架加载器显示我的页面是否正在加载。我如何在 nuxt 中做到这一点？
这是我的骨架加载器的代码；

 <template>
    <div class="placeholder-container">
      <div class="placeholder wave">
        <div class="square"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </div>
</template>
<style scoped>
.placeholder-container {
  width: 35rem;
  margin: 15px auto 15px auto;
}

.placeholder {
  padding: 10px;
  width: 100%;
  // border: 1px solid lightgrey;
  display: flex;
  flex-direction: column;
}

.placeholder div {
  background: #e8e8e8;
}

.placeholder .square {
  width: 100%;
  height: 22rem;
  border-radius: 1rem;
  margin: 0 0 10px;
}

.placeholder .line {
  height: 12px;
  margin: 0 0 10px 0;
}
.placeholder .line:nth-child(2) {
  width: 120px;
}
.placeholder .line:nth-child(3) {
  width: 180px;
}
.placeholder .line:nth-child(4) {
  width: 150px;
}

.placeholder.wave div {
  animation: wave 1s infinite linear forwards;
  -webkit-animation: wave 1s infinite linear forwards;
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
}

@keyframes wave {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

@-webkit-keyframes wave {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
</style>

我通常不使用nuxt做的是创建一个数据变量(loading = true)，并在我完成api调用后将其更改为false，但由于asyncData在服务器中运行，我该如何使其工作？如果有更好的方法来做这样的事情，我也会很感激

Answer 1

占位符
在特定页面上显示占位符组件
在加载过程中，从 asyncData 切换到 fetch hook ，它暴露了 $fetchState.pending设置为 true 的标志完成时:

<template>
  <div>
    <MyLoading v-if="$fetchState.pending" />
    <MyContent v-else :posts="posts" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: []
    }
  },
  async fetch() {
    const { data } = await this.$axios.get(...)
    this.posts = data
  }
}
</script>

自定义加载进度条
Nuxt 提供了一个默认的加载进度条，在页面加载时出现在应用程序的顶部。你可以 customize the progress bar's appearance :

// nuxt.config.js
export default {
  loading: {
    color: 'blue',
    height: '5px'
  }
}  

或者您可以指定自己的 custom loading component反而:

// nuxt.config.js
export default {
  loading: '~/components/MyLoading.vue'
}

demo