使用 nprogress 包来完成效果
1、下载nprogress 包
npm install nprogress --save nprogress
2、在request.js 中引用
//导入nprogress加载进度条包即样式
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 请求拦截器
service.interceptors.request.use(config => {
// 请求开始 进度条加载
NProgress.start()
if (store.getters.token) {
// .....
}
return config
}, err => {
return Promise.reject(err)
})
// 响应拦截器
service.interceptors.response.use(response => {
// 请求结束 进度条关闭
NProgress.done();
const { data, message, success } = response.data
if (success) {
// ......
}, err => {
// ....
})
3、调整进度条样式
在 'nprogress/nprogress.css' 中进行设置即可