您正在浏览 Nuxt 2 文档。前往 Nuxt 3 文档， 或了解更多关于 Nuxt 2 长期支持。

loading 属性

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

  • 类型: Boolean 或 Object 或 String 
export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()

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

禁用进度条

  • 类型: Boolean
nuxt.config.js
export default {
  loading: false
}

自定义进度条

  • 类型: Object 
export default {
  loading: {
    color: 'blue',
    height: '5px'
  }
}

自定义进度条的属性列表：

键 类型 默认值 说明
color String 'black' 进度条的 CSS 颜色
failedColor String 'red' 渲染路由时发生错误（如 data 或 fetch 返回错误）时进度条的 CSS 颜色
height String '2px' 进度条高度（用于进度条的 style 属性）
throttle Number 200 等待指定毫秒数后再显示进度条，用于防止进度条闪烁
duration Number 5000 进度条显示的最大时间（毫秒），Nuxt 假设路由会在 5 秒内渲染完成
continuous Boolean false 当加载时间超过 duration 时，保持进度条动画
css Boolean true 设为 false 可删除默认进度条样式（并添加自定义样式）
rtl Boolean false 将进度条方向设为从右到左

使用自定义加载组件

  • 类型: String

组件必须暴露以下部分方法：

方法 是否必须 说明
start() 必须 路由变化时调用，此时显示自定义组件
finish() 必须 路由加载（及数据获取）完成时调用，此时隐藏自定义组件
fail(error) 可选 路由无法加载时调用（如数据获取失败）
increase(num) 可选 路由组件加载期间调用，num 为小于 100 的整数
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
export default {
  loading: '~/components/loading.vue'
}
Edit this page on GitHub Updated at Tue, Apr 14, 2026