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到fetchhook，该钩子会公开完成时$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 提供了一个默认的加载进度条，当页面加载时，该进度条出现在应用程序的顶部。您可以自定义进度条的外观：

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

或者您可以指定自己的自定义加载组件：

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

演示