element-ui全屏全局加载动画（请求，路由加载）

为的目的就是让用户在使用的时候不至于一直看到你的页面等待，优化用户的使用体验。
使用的是Element-ui 的全局loading加载，以服务方式调用，使用Vuex，结合全局路由守卫与请求拦截器，实现这个内容。


建议使用Vuex新建公用方法去修改状态。

在Vuex的js文件中以服务的方式调用，引入 Loading 服务

import { Loading } from 'element-ui';

并在state（Vuex集中变量存储仓库）中新增一个变量为options

options 参数为 Loading 的配置项，具体见下表。LoadingService 会返回一个 Loading 实例，可通过调用该实例的 close 方法来关闭它：

我们使用他的基本配置项即可

const state={
options:{
        lock: true,
        text: '加载中，请稍后',//加载动画的文字
        spinner: 'el-icon-loading',//加载动画的图标
        background: 'rgba(0, 0, 0, 0.7)'//加载动画的背景
    },
}

在你的mutations中 新建你的全局方法调用这个服务

const mutations={
	showLoading(state,val){
        let loadingInstance = Loading.service(state.options);
        val? Loading.service(state.options) : loadingInstance.close() //这里判断调用方法时候的参数值，打开服务的时候传true，关闭服务的时候传false
    },
}

定义好了你的方法后，你就可以使用他们：
打开你的router文件，引入Vuex

import vuex from '../vuex/store'

在router.beforeEach前置路由守卫放行回调的时候去触发，在后置钩子去关闭他。

//前置守卫
router.beforeEach((to, from, next) => {
	if(login){//这里写的假判断，一般在你的路由守卫中，什么时候调用next()，什么时候调用你的打开服务方法
		vuex.commit('showLoading',true);
		next()
	}else{
		next({
                path: '/'
            })
	}
})
//后置钩子
router.afterEach(() =>{
    vuex.commit('showLoading',false)
})

至此，页面跳转时的全屏加载动画就做好了。

请求的时候使用同样的方式去调用这两个方法；

在你的请求拦截的js文件中引入Vuex

import vuex from '../vuex/store'

发起请求的时候，在你的axios.interceptors.request.use去调用方法传true，在axios.interceptors.response.use调用方法传false

在请求或响应的方法中找到
你的方法就在这里边调用即可。