vue 使用nprogress 实现顶部加载进度条效果

一、下载安装

yarn add nprogress
npm i nprogress
cnpm i nprogress

二、引入

//可以在router.js 和 axios.js文件中使用
import NProgress from 'nprogress'
//样式可以放在main.js中全局样式
import 'nprogress/nprogress.css'

三、配置使用

//页面打开时显示
router.beforeEach((to,from,next) => {
  NProgress.start() 
  next()
})
router.afterEach(() => {
  NProgress.done()
})
//axios异步请求时
NProgress.done()
放入拦截器中使用

进度条颜色修改：

在vue文件中修改，建议App.vue中
 #nprogress .bar {
      background: red !important; //自定义颜色
  }

简单配置:

//控制速度，一般不用特意控制，进度条速度随网页加载速度
NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })

四、其他配置项内容

1.通过 minimum 来修改最小百分比
2.NProgress.configure({ minimum: 0.1 });
3.通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed （毫秒ms）
4.NProgress.configure({ ease: ‘ease’, speed: 500 });
5.关闭进度条步进，设置 trickle 为 false。
6.NProgress.configure({ trickle: false });
7.调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔，单位毫秒ms)
8.NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });
9.禁用进度环，设置 showSpinner 为 false
10.NProgress.configure({ showSpinner: false });

五、灵活使用

1. NProgress.start() — 显示进度条
2. NProgress.set(0.4) —设置百分比
3. NProgress.inc() — 增加一点点
4. NProgress.done() — 完成进度条