loading 属性配置

  • 类型: BooleanObjectString

在页面切换的时候,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

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

类型 默认值 描述
color String 'black' 进度条的颜色
failedColor String 'red' 页面加载失败时的颜色 (当 datafetch 方法返回错误时)。
height String '2px' 进度条的高度 (在进度条元素的 style 属性上体现)。
throttle Number 200 在ms中,在显示进度条之前等待指定的时间。用于防止条形闪烁。
duration Number 5000 进度条的最大显示时长,单位毫秒。Nuxt.js 假设页面在该时长内加载完毕。
rtl Boolean false 从右到左设置进度条的方向。
举个例子,一个5像素高的蓝色进度条,可以在 nuxt.config.js 中配置如下:
module.exports = {
  loading: {
    color: 'blue',
    height: '5px'
  }
}

自定义加载组件

  • 类型: String

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

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

方法 是否必须 描述
start() 路由更新(即浏览器地址变化)时调用, 请在该方法内显示组件。
finish() 路由更新完毕(即asyncData方法调用完成且页面加载完)时调用,请在该方法内隐藏组件。
fail() 路由更新失败时调用(如asyncData方法返回异常)。
increase(num) 页面加载过程中调用, num 是小于 100 的整数。

我们可以在 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'
}

如何提交问题或文档贡献? 在 GitHub 编辑此页面!