vue-element-admin 全局loading加载等待

Vue-Element-Admin 是一个基于 Vue.js 的前端管理系统框架，该框架支持全局loading加载等待功能，可以有效提升用户体验。下面将介绍如何在 Vue-Element-Admin 中使用全局loading加载等待功能的完整攻略。

添加全局loading组件

首先，在 src/layout/components/AppMain.vue 文件中添加以下代码：

<template>
  <div class="app-main">
    <loading ref="loading"></loading>
    <router-view></router-view>
  </div>
</template>

<script>
  import Loading from '@/components/Loading'

  export default {
    components: {
      Loading
    },
    methods: {
      showLoading () {
        this.$refs.loading.show()
      },
      hideLoading () {
        this.$refs.loading.hide()
      }
    }
  }
</script>

在 <div class="app-main"> 标签中添加了一个全局 loading 组件，并且为组件添加了 ref 属性方便调用。在 methods 中定义了两个方法 showLoading() 和 hideLoading() 分别用于显示和隐藏全局loading组件。

在全局路由钩子中使用loading

接下来，在 src/permission.js 文件中增加 router.beforeEach 的钩子函数：

import router from './router'
import store from './store'

router.beforeEach((to, from, next) => {
  store.dispatch('user/getUserInfo').then(() => {
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      next()
    }
  }).catch(() => {
    if (to.path === '/login') {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
    }
  }).finally(() => {
    store.dispatch('app/hideLoading')
  })

})

router.afterEach(() => {
  store.dispatch('app/hideLoading')
})

该钩子函数中通过 store.dispatch('app/hideLoading') 方法来隐藏全局loading组件。

示例

接下来以 axios 请求为例，来展示如何通过调用 showLoading 和 hideLoading 方法来控制全局loading组件的显示和隐藏。

// 引入axios
import axios from 'axios'
// 引入Vue
import Vue from 'vue'
// 全局添加一个 axios 拦截器
axios.interceptors.request.use((config) => {
  // 显示loading
  Vue.$app.showLoading()
  return config
}, error => {
  return Promise.reject(error)
})

axios.interceptors.response.use((response) => {
  // 隐藏loading
  Vue.$app.hideLoading()
  return response
}, error => {
  // 隐藏loading
  Vue.$app.hideLoading()
  return Promise.reject(error.response.data)
})

在请求过程中，如果调用了 showLoading 方法，则全局的loading组件会显示出来，请求完成后再调用 hideLoading 方法，全局loading组件即可以隐藏。

以上就是使用 Vue-Element-Admin 实现全局loading加载等待功能的完整攻略及示例。区别在于，其中的 this.$refs.loading 和 Vue.$app 都是通过调用不同的组件和全局变量实现的，具体要根据实际情况进行调整。