vue请求实现进度条
实现请求进度条的方法
在Vue中实现请求进度条可以通过多种方式完成，常见的有使用第三方库如axios结合nprogress或自定义进度条组件。以下是几种实现方法：
使用axios和nprogress
安装依赖：
npm install axios nprogress在请求拦截器和响应拦截器中添加进度条控制：
import axios from 'axios';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
axios.interceptors.request.use(config => {
NProgress.start();
return config;
});
axios.interceptors.response.use(response => {
NProgress.done();
return response;
}, error => {
NProgress.done();
return Promise.reject(error);
});自定义进度条组件
创建一个Vue组件实现进度条效果：
<template>
<div class="progress-bar" v-if="isLoading">
<div class="progress" :style="{ width: progress + '%' }"></div>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: false,
progress: 0
};
},
methods: {
start() {
this.isLoading = true;
this.progress = 0;
const interval = setInterval(() => {
this.progress += 10;
if (this.progress >= 100) {
clearInterval(interval);
}
}, 100);
},
finish() {
this.progress = 100;
setTimeout(() => {
this.isLoading = false;
}, 300);
}
}
};
</script>
<style>
.progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #f0f0f0;
z-index: 9999;
}
.progress {
height: 100%;
background-color: #42b983;
transition: width 0.3s ease;
}
</style>在全局或局部注册组件后，在请求时调用start和finish方法。
结合Vue Router实现路由切换进度条
在路由切换时显示进度条：
import Vue from 'vue';
import Router from 'vue-router';
import NProgress from 'nprogress';
Vue.use(Router);
const router = new Router({
routes: [...]
});
router.beforeEach((to, from, next) => {
NProgress.start();
next();
});
router.afterEach(() => {
NProgress.done();
});以上方法可根据具体需求选择或组合使用。第三方库如nprogress提供了开箱即用的解决方案，而自定义组件则更灵活可控。
