通过NProgress可以实现路由跳转或是请求时在浏览器顶部的出现进度条
官网:http://ricostacruz.com/nprogress/
github:https://github.com/rstacruz/nprogress
如下图顶部红色进度条,颜色可更改
使用步骤:
//核心步骤:
//1.安装
npm install --save nprogress
//2.导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//3.设置进度条开始及结束;
NProgress.start();
NProgress.done();
因为需求是在该项目请求时出现进度条,所以是放在了axios的拦截器中
import Axios from 'axios' //将其导入在axios模块中 css在main中导入
import NProgress from 'nprogress'
// 添加请求拦截器
Axios.interceptors.request.use(function (config) {
NProgress.start();
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
Axios.interceptors.response.use(function (response) {
NProgress.done();
// 对响应数据做点什么
return response.data;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
这样就能轻松实现进度条功能了,如果需要设置颜色也很简单
// NProgress的样式修改
#nprogress .bar {
background: red !important; //自定义颜色
}
直接在全局css中写入即可自定义颜色。