axios vue 加载效果动画_Vue 使用 axios 或者 vue-router 配置页面加载动画

先提一笔，这篇文章是关于 Vue 页面加载动画的实现

以下介绍两种方法

使用 axios 配置全局中当发生 ajax 请求时，显示一个加载动画，当 ajax 请求结束后，隐藏加载动画

使用 Vue-router 实现当页面跳转时有一个加载动画

第一种方式， 配置 axios 实现加载动画

在 axios 的拦截器中实现

1. 在 App.vue 文件中添加你的加载动画组件 或者 HTML，因为加载动画是全局的，所以应该放在 App.vue ,下面示例中我用的是 mint-ui 里面的spinner,

然后通过Vuex  this.$store.state.loading 来控制，该加载动画的显示隐藏

2. 在Vuex 中托管  loading

1 export default newVuex.Store({2 state: {3 loading: true

4 },5 mutations: {6 loadStatus (state, flag) {7 state.loading =flag8 }9 }10 }

3. Axios 拦截器中配置请求时显示加载动画，请求完成隐藏加载动画

项目中一般需要将axios封装，我们就在该文件中的拦截器中添加代码

首先需要在文件中引入 VueX 实例，也就是代码中的 store, 通过这个 store 我们才能访问到 Vuex中的数据

在请求拦截中触发VueX中的  loadStatus 方法，使加载动画显示

在响应拦截中同样触发  loadStatus 方法，试加载动画隐藏

1 import axios from 'axios'

2 import store