加载属性

  • 类型:布尔对象字符串

Nuxt.js提供了自己的加载进度条组件,该组件显示在路由之间。您可以自定义它、禁用它或创建自己的组件。

出口默认的安装nextTick美元=>nuxt美元美元的加载开始setTimeout=>nuxt美元美元的加载完成500

禁用进度条

  • 类型:布尔
nuxt.config.js
出口默认的加载

自定义进度条

  • 类型:对象
出口默认的加载颜色“蓝”高度“5 px”

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

关键 类型 默认的 描述
颜色 字符串 “黑” 进度条的CSS颜色
failedColor 字符串 “红色” 当渲染路由时出现错误时,进度条的CSS颜色(如果数据获取例如,返回一个错误)。
高度 字符串 “2 px” 进度条的高度(用于风格进度条属性)
节气门 数量 200 以毫秒为单位,在显示进度条之前等待指定的时间。用于防止金属条闪光。
持续时间 数量 5000 在ms(进程条的最大持续时间)中,Nuxt.js假定路由将在5秒之前被渲染。
连续 布尔 当加载时间超过时,保持动画进度条持续时间
css 布尔 真正的 设置为false可以删除默认的进度条样式(并添加您自己的)。
rtl 布尔 从右到左设置进度条的方向。

使用自定义加载组件

  • 类型:字符串

你的组件必须公开这些方法:

方法 要求 描述
start () 要求 当路由改变时调用,这是显示组件的地方。
完成() 要求 当加载路由(和获取数据)时调用,这就是隐藏组件的地方。
失败(错误) 可选 当路由无法加载时调用(例如无法获取数据)。
增加(num) 可选 在加载路由组件时调用,全国矿工工会是小于100的整数。
组件/ loading.vue
<模板超文本标记语言><div页面加载v加载><p>加载……p>div>模板><脚本>出口默认的数据=>加载方法开始加载真正的完成加载脚本><风格作用域>.loading-page位置固定00宽度One hundred.高度One hundred.背景rgba2552552550.8text-align中心padding-top200px字体大小30.px字体类型无衬线风格>
nuxt.config.js
出口默认的加载“~ /组件/ loading.vue”