简介
NProgress是页面跳转或者发生异步请求是浏览器顶部的进度条
效果如下：
安装
## 1.使用 npm 或者 yarn 安装及可
① npm install --save nprogress
② yarn add nprogress
两种任选一种安装
## 2.用法
NProgress.start(); //进度条出现
NProgress.done(); //进度条消失
使用
*** 路由文件中导入，页面跳转出现进度条(router.js)
## 1.导入 (导入文件可以是 路由文件 也可以是 异步请求文件)
//导入
import NProgress from 'nprogress'import'nprogress/nprogress.css'
## 2.使用
router.beforeEach((to, from, next) =>{
//出现进度条
NProgress.start()
next()
})
router.afterEach(()=>{
//进度条消失
NProgress.done()
}
*** 异步请求文件中导入，发送请求出现进度条(这里使用 axios 发送请求)
## 1.导入
//引入nprogress插件
import NProgress from 'nprogress' import 'nprogress/nprogress.css'
## 2.使用
//添加请求拦截器
axios.interceptors.request.use(function(config) {
// 出现进度条
NProgress.start()returnconfig
},function(error) {//Do something with request error
returnPromise.reject(error)
})//在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config =>{
NProgress.done()returnconfig
})
NProgress配置
## 1.showSpinner：进度环显示隐藏
NProgress.configure({showSpinner: false});
## 2.ease：调整动画设置，ease可传递CSS3缓冲动画字符串(如ease、linear 等)。speed为动画速度(单位ms)
NProgress.configure({ease:'ease',speed:500});
## 3.minimum：最低百分比
NProgress.configure({minimum:0.3});
## 4.百分比：通过设置progress的百分比，调用 .set(n)来控制进度，其中n的取值范围为0-1。
NProgress.set(0.4);
VUE中修改进度条颜色
在App.vue中的style中增加：
#nprogress .bar{background:red !important;//自定义颜色}
特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢
