要求

当页面存在axios请求时，显示loading图标，当所有axios请求完成时，隐藏loading图标

实现原理

通过axios request拦截器（发起请求时触发） 与 axios response拦截器（请求完成时触发），控制loading图标图标显隐

/main.js 添加这两个拦截器，需要引入jquery;

import $ from 'jquery'

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

//axios 实现loading
//axios request拦截器
axios.interceptors.request.use(function (config) {
	$('.loading').fadeIn();
	let process = $('.loading').attr('process')*1+1;
	$('.loading').attr('process',process);
   return config;
}, function (error) {
	return Promise.reject(error);
});

//axios response拦截器
axios.interceptors.response.use(data => {
	let process = $('.loading').attr('process')*1-1;
	$('.loading').attr('process',process);
	if(process == 0){
		$('.loading').fadeOut();
	}
	return data
}, error => {
  return Promise.reject(error);
})

loading组件代码

<template>
  <div process="0" class="loading"><van-loading type="spinner" /></div>
</template>

<script>
import Vue from 'vue';
import { Loading } from 'vant';
Vue.use(Loading);
export default {
  name: 'Loading',
  components:{
    Loading
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.loading{
  display: none;
  position: fixed;
  width:60px;
  height: 60px;
  margin:-30px 0 0 -30px;
  background:rgba(0,0,0,0.5);
  z-index: 9999;
  top:50%;
  left:50%;
  text-align: center;
  line-height:60px;
  border-radius: 5px;
}
</style>

/App.vue 添加loading组件  <Loading></Loading>

<template>
  <div id="app">
	
    <router-view/>
    <div class="support">
       <p>51助手网提供技术支持</p>
    </div>
    <Loading></Loading>
	
  </div>
</template>

当有些页在请求失败时，会导至loading一直显示，所以在路由后置函数中，初始化一下loading

//router后置钩子函数
router.afterEach((to,from)=>{
	$('.loading').attr('process',0); //初始化loading
})