API 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.con.js 里面 loading: false 的配置:
module.exports = { loading: false }
个性化加载进度条
类型: Object
以下表格为进度条定制化时可用到的配置项及其说明。
举个例子,5像素高的蓝色进度条,可以在 nuxt.con.js 中配置如下:
module.exports = { loading: { color: 'blue', height: '5px' } }
加载组件
类型: String
你可以新建加载组件替代 Nuxt.js 认的。 使用自己的加载组件,需要在 loading 配置项里指定组件的路径,Nuxt.js 会该组件。
组件需要实现以下接口:
我们可以在 components 目录下创建的加载组件,如 components/loading.vue:
<template> <div 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.con.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%,这将重复直到加载完成。
持续进度条的示例: