加载

Nuxt 提供了一个在页面切换时显示的加载进度条组件。可以对其进行自定义、禁用，或创建自己的组件。

自定义进度条

进度条的颜色、大小、持续时间和方向等属性都可以根据应用需求进行自定义。通过更新 nuxt.config.js 中 loading 属性的相关属性来实现自定义。

例如，要设置高度为 5px 的蓝色进度条，请将 nuxt.config.js 更新如下：

export default {
  loading: {
    color: 'blue',
    height: '5px'
  }
}

可用于自定义进度条的属性列表。

禁用进度条

如果不想在路由切换时显示进度条，在 nuxt.config.js 文件中添加 loading: false：

export default {
  loading: false
}

也可以在特定页面上禁用默认加载进度条。

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

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

以编程方式启动加载条

加载条也可以在组件内以编程方式启动，例如调用 this.$nuxt.$loading.start() 启动加载条，调用 this.$nuxt.$loading.finish() 停止加载条。

在页面组件的挂载过程中，$loading 属性可能无法立即访问。为解决此问题，如果想在 mounted 方法中启动加载器，请确保在 this.$nextTick 内调用 $loading 方法，如下所示：

export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}

进度条内部原理

遗憾的是，加载组件无法预先知道加载新页面需要多长时间，因此无法将进度条精确地动画到加载时间的 100%。

Nuxt 的加载组件通过设置 duration 来部分解决这个问题，该值应设置为加载过程所需时间的估计值。除非使用自定义加载组件，否则进度条始终会在 duration 时间内从 0% 移动到 100%（无论实际进度如何）。如果加载时间超过 duration 设置的时间，进度条将停留在 100% 直到加载完成。

通过将 continuous 设置为 true 可以改变此默认行为。进度条到达 100% 后，会在 duration 设置的时间内开始向 0% 收缩。到达 0% 后如果加载仍未完成，则再次从 0% 向 100% 增长，直到加载完成为止。

export default {
  loading: {
    continuous: true
  }
}

设置了 continuous 的进度条示例：

使用自定义加载组件

可以创建自己的组件，让 Nuxt 调用它来替代默认的进度条组件。为此，需要在 loading 选项中指定自定义组件的路径，这样 Nuxt 就会直接调用自定义组件。

自定义组件需要具备以下方法：

可以在 components/LoadingBar.vue 中创建自定义组件：

<template>
  <div v-if="loading" class="loading-page">
    <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 使用自定义组件：

export default {
  loading: '~/components/LoadingBar.vue'
}

loading indicator 属性

在 SPA 模式下运行 Nuxt 时，初次页面加载时没有来自服务器的内容。因此提供了一个加载指示器，可以在页面加载期间显示自定义颜色、背景和更改指示器，以替代空白页面。

export default {
  loadingIndicator: {
    name: 'circle',
    color: '#3B8070',
    background: 'white'
  }
}

内置指示器

这些指示器来自优秀的 SpinKit 项目。可以在 Spinkit 的演示页面上试用这些加载动画。使用这些加载动画只需在 name 属性中指定所需加载动画的名称即可。以下是可用的内置指示器列表：

• circle
• cube-grid
• fading-circle
• folding-cube
• chasing-dots
• nuxt
• pulse
• rectangle-bounce
• rotating-plane
• three-bounce
• wandering-cubes

内置指示器支持 color 和 background 选项。

自定义指示器

如果需要特殊的自定义指示器，可以将 String 值或 Name 键设置为指向 HTML 模板的路径作为指示器源代码！届时所有选项也会传递给模板。

如果需要基础模板，可以使用 Nuxt 的内置源代码 。