• loading 属性配置
    • 禁用加载进度条
    • 个性化加载进度条
    • 自定义加载组件
    • 进度条时长说明

    loading 属性配置

    • 类型： Boolean 或 Object 或 String

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

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

    1. export default {
    2.   mounted () {
    3.     this.$nextTick(() => {
    4.       this.$nuxt.$loading.start()
    6.       setTimeout(() => this.$nuxt.$loading.finish(), 500)
    7.     })
    8.   }
    9.  }

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

    禁用加载进度条

    • 类型： Boolean页面切换的时候如果不想显示加载进度条，可以在 nuxt.config.js 里面增加 loading: false 的配置：
    1. module.exports = {
    2.   loading: false
    3. }

    个性化加载进度条

    • 类型： Object以下表格为进度条定制化时可用到的配置项及其说明。
    键类型默认值描述
    colorString'black'进度条的颜色
    failedColorString'red'页面加载失败时的颜色 （当 data 或 fetch 方法返回错误时）。
    heightString'2px'进度条的高度 (在进度条元素的 style 属性上体现)。
    throttleNumber200在ms中，在显示进度条之前等待指定的时间。用于防止条形闪烁。
    durationNumber5000进度条的最大显示时长，单位毫秒。Nuxt.js 假设页面在该时长内加载完毕。
    continuousBooleanfalse当加载时间超过duration时，保持动画进度条。
    cssBooleantrue设置为false以删除默认进度条样式（并添加自己的样式）。
    rtlBooleanfalse从右到左设置进度条的方向。

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

    1. module.exports = {
    2.   loading: {
    3.     color: 'blue',
    4.     height: '5px'
    5.   }
    6. }

    自定义加载组件

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

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

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

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

    1. <template lang="html">
    2.   <div class="loading-page" v-if="loading">
    3.     <p>Loading...</p>
    4.   </div>
    5. </template>
    7. <script>
    8. export default {
    9.   data: () => ({
    10.     loading: false
    11.   }),
    12.   methods: {
    13.     start () {
    14.       this.loading = true
    15.     },
    16.     finish () {
    17.       this.loading = false
    18.     }
    19.   }
    20. }
    21. </script>
    23. <style scoped>
    24. .loading-page {
    25.   position: fixed;
    26.   top: 0;
    27.   left: 0;
    28.   width: 100%;
    29.   height: 100%;
    30.   background: rgba(255, 255, 255, 0.8);
    31.   text-align: center;
    32.   padding-top: 200px;
    33.   font-size: 30px;
    34.   font-family: sans-serif;
    35. }
    36. </style>

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

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

    进度条时长说明

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

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

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

    持续进度条的示例：continuous loading