0.nProgress 官网:http://ricostacruz.com/nprogress/github:https://github.com/rstacruz/nprogress
1.nProgress 安装
npm install --save nprogress
2.在main.js 中引入nProgress 和 css 样式
//导入进度条插件\js与css
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'
3.主要方法
NProgress.start() — 显示进度条
NProgress.done() — 完成进度
NProgress.set(Number) — 设置百分比
NProgress.inc() — 增加一点点,随机数
4.主要配置
NProgress.config({
minimum:0.1, // 最小百分比
template: "..." // 修改标记结构,需要一个包含 role='bar' 属性的元素。
ease: 'ease', // 动画设置
speed: 500, // 速度设置毫秒ms
trickle: false, // 关闭进度条步进
trickleRate: 0.02, // 度条步进
trickleSpeed: 800, // 度条步进速度毫秒ms
showSpinner: false // 关闭进度环 默认true
})
一般可以将方法写在路由守卫中