vue中使用nprogress优化导航条和请求数据的时候进行加载中显示
以下内容仅供学习使用
- 先进行安装
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>
- 效果图,刷新之后就会出现蓝条啦!
- 效果图,加载数据