Nuxt.js loading 属性配置

loading 属性配置

• 类型： Boolean 或 Object 或 String

在页面切换的时候，Nuxt.js 使用内置的加载组件显示加载进度条。你可以定制它的样式，禁用或者创建自己的加载组件。

在你的组件中你可以使用this.$nuxt.$loading.start()来启动加载条。使用this.$nuxt.$loading.finish()来使加载条结束。

export default {
  mounted () {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()

      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}

如果要在mounted方法中启动它，请确保使用this.$nextTick来调用它，因为$loading可能无法立即使用。

禁用加载进度条

• 类型： Boolean

页面切换的时候如果不想显示加载进度条，可以在 nuxt.config.js 里面增加 loading: false 的配置：

module.exports = {
  loading: false
}

个性化加载进度条

• 类型： Object

以下表格为进度条定制化时可用到的配置项及其说明。

举个例子，一个5像素高的蓝色进度条，可以在 nuxt.config.js 中配置如下：

module.exports = {
  loading: {
    color: 'blue',
    height: '5px'
  }
}

自定义加载组件

• 类型： String

你可以新建一个加载组件替代 Nuxt.js 默认的。 使用自己的加载组件，需要在 loading 配置项里指定组件的路径，Nuxt.js 会自动调用该组件。

自定义组件需要实现以下接口方法：

我们可以在 components 目录下创建自定义的加载组件，如 components/loading.vue：

<template lang="html">
  <div class="loading-page" v-if="loading">
    <p>Loading...</p>
  </div>
</template>

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

<style scoped>
.loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding-top: 200px;
  font-size: 30px;
  font-family: sans-serif;
}
</style>

然后, 更新 nuxt.config.js 告诉 Nuxt.js 使用自定义加载组件：

module.exports = {
  loading: '~components/loading.vue'
}

进度条时长说明

Loading组件不可能事先知道多长时间。加载新页面将需要。因此，无法将进度条准确地设置为100%的加载时间。

Nuxt的加载组件通过让你设置 duration 来部分解决这个问题，这应该设置为 guestimate 加载过程需要多长时间。 除非您使用自定义加载组件，否则进度条将始终在 duration 时间内从0%移至100%（无论实际进度如何）。 当加载时间超过 duration 时，进度条将保持100%直到加载完成。

您可以通过将continuous设置为true来更改默认行为，然后在达到100%后，进度条将在duration时间内再次收缩回0%。当达到0%后仍未完成加载时，它将再次从0%开始增长到100%，这将重复直到加载完成。

持续进度条的示例：