以下内容仅供学习使用
- 先进行安装
npm install --save nprogress
或者
yarn add nprogress - 在你封装的request.js中使用
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
- 在axios.interceptors.request.use(config => {},请求开始的时候使用
NProgress.start() //启动
以下是自己当前例子使用到的代码
let loadingInstance = null
axios.interceptors.request.use(config => {
NProgress.start() //启动
// 显示loading状态
loadingInstance = Loading.service({
text: '数据加载中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)', // 背景颜色
duration: 1000, // 设置loading显示时间，单位为毫秒
delay: 500 // 延迟500ms显示
})
//为请求头对象，添加token验证的Authorization字段
config.headers.Authorization = window.sessionStorage.getItem("token")
return config
}, error => {
// 隐藏loading状态
loadingInstance.close()
return Promise.reject(error)
}),
- 在 axios.interceptors.response.use(response => {}中使用
NProgress.done() //关闭
axios.interceptors.response.use(response => {
// 隐藏loading状态
loadingInstance.close()
NProgress.done() //关闭
return response
}, error => {
// 隐藏loading状态
loadingInstance.close()
return Promise.reject(error)
})
- 它默认显示为蓝色进度条，如果你想自定义进度条颜色，可在全局css中或在app.vue下写入自己自定义的css样式；
<style>
// 自定义进度条颜色
#nprogress .bar {
background: #F811B2 !important; //自定义颜色
}
</style>
- 效果图，刷新之后就会出现蓝条啦！
- 效果图，加载数据
