先提一笔，这篇文章是关于 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 from '@/store'
3 //请求拦截
4 axios.interceptors.request.use(res =>{5 store.commit('loadStatus', true)6 returnPromise.resolve(res)7 }, error =>{8 returnPromise.reject(error)9 })10
11 //响应拦截
12 axios.interceptors.response.use(res =>{13 if (res.status === 200) {14 store.commit('loadStatus', false)15 returnPromise.resolve(res)16 } else{17 MessageBox('提示', '服务器出问题了，请重新进入试试')18 }19 }, error =>{20 MessageBox('提示', '服务器出问题了，请重新进入试试')21 returnPromise.reject(error)22 })
第二种方式， 配置 axios 实现加载动画
方式一的第一步和第二步照搬下来
第三步：配置 vue-router,添加 路由守卫
引入 store
在 router.beforeEach 方法中触发 loadStatus, 显示加载动画， next() 方法一定要有，否则加载不出页面的
在 router.afterEach 方法中触发 loadStatus, 隐藏加载动画
1 import Vue from 'vue'
2 import Router from 'vue-router'
3 import routes from './router.api'
4 import store from '@/store'
5 Vue.use(Router)6
7 const router = newRouter({8 routes9 })10 router.beforeEach((to, from, next) =>{11 store.commit('loadStatus', true)16 next()17 })18
19 router.afterEach(function(to) {20 store.commit('loadStatus', false)21 })22 export default router
以上就是在 Vue 项目中使用axios 或者 vue-router 配置页面加载动画
