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
以下表格为进度条定制化时可用到的配置项及其说明。
| 键 | 类型 | 默认值 | 描述 |
|---|---|---|---|
color | String | 'black' | 进度条的颜色 |
failedColor | String | 'red' | 页面加载失败时的颜色 （当 data 或 fetch 方法返回错误时）。 |
height | String | '2px' | 进度条的高度 (在进度条元素的 style 属性上体现)。 |
throttle | Number | 200 | 在ms中，在显示进度条之前等待指定的时间。用于防止条形闪烁。 |
duration | Number | 5000 | 进度条的最大显示时长，单位毫秒。Nuxt.js 假设页面在该时长内加载完毕。 |
continuous | Boolean | false | 当加载时间超过duration时，保持动画进度条。 |
css | Boolean | true | 设置为false以删除默认进度条样式（并添加自己的样式）。 |
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'
}进度条时长说明
Loading组件不可能事先知道多长时间。加载新页面将需要。因此，无法将进度条准确地设置为100%的加载时间。
Nuxt的加载组件通过让你设置 duration 来部分解决这个问题，这应该设置为 guestimate 加载过程需要多长时间。 除非您使用自定义加载组件，否则进度条将始终在 duration 时间内从0%移至100%（无论实际进度如何）。 当加载时间超过 duration 时，进度条将保持100%直到加载完成。
您可以通过将continuous设置为true来更改默认行为，然后在达到100%后，进度条将在duration时间内再次收缩回0%。当达到0%后仍未完成加载时，它将再次从0%开始增长到100%，这将重复直到加载完成。
持续进度条的示例：
