因为我的项目是使用的elements写的没有iview组件中有加载进度条,不可能为了一个需求下另一个包
- 将进度条的div放在APP.vue中在template中最上面
<div id="progress_bar"></div>
css样式 动画
#progress_bar {
width: 100vw;
height: 5px;
background: rgba(95, 190, 235, 0.931);
z-index: 99;
animation: grow 5s infinite forwards;
}
@keyframes grow {
from{
width: 0;
}
to{
width: 100vw;
}
}
export const LoadingBar = {
// 路由跳转之前 开始请求加载这个
start() {
let progress_bar = document.getElementById('progress_bar')
//当拦截路由时dom还没加载完, 所有有了之后才走下面的
if (progress_bar) {
progress_bar.style.display = 'block'
}
},
// 跳转结束与请求之后
finish() {
let progress_bar = document.getElementById('progress_bar')
if (progress_bar) {
progress_bar.style.display = 'none'
}
},
// 请求失败之后
error(){
let progress_bar = document.getElementById('progress_bar')
if (progress_bar) {
progress_bar.style.display = 'none'
alert('加载失败')
}
}
}
import {LoadingBar} from './index'
router.beforeEach((to, from, next) => {
LoadingBar.start()
// 开发时路由跳转比较快,设定一个定时器测试一下
setTimeout(()=>{
next()
},1000)
})
router.afterEach((to, from) => {
LoadingBar.finish()
})
const instance = axios.create({
baseURL: BASE_URL
});
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
LoadingBar.start()
return config;
}, function (error) {
// 对请求错误做些什么
LoadingBar.error()
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
LoadingBar.finish()
return response;
}, function (error) {
// 对响应错误做点什么
LoadingBar.error()
return Promise.reject(error);
});