多頁面vue應用中，在請求介面之前統一加上Loading作為未請求到資料之前的過渡展示。由於多頁面未使用vuex做狀態管理，只在入口統一註冊了bus，所以此例子使用eventbus做事件通訊。

在Loading.vue中，一個簡單的公共loading元件

這個loading元件用showLoading控制展示與否。

<template>
  <div class="loading" v-show="showLoading">
    <img/>
    <p>載入中...</p>
  </div>
</template>
 

Loading.vue中，用bus接收全域性事件，控制組件的顯示隱藏

用SHOW_LOADING和HIDE_LOADING事件控制組件的顯示隱藏

<script>
import { Bus, SHOW_LOADING, HIDE_LOADING } from 'utils/bus'
export default {
  name: 'loading',
  data () {
    return {
      showLoading: false
    }
  },
  created () {
    this.loadingFn()
  },
  methods: {
    loadingFn () {
      Bus.$on(SHOW_LOADING, () => {
        this.showLoading = true
      })

      Bus.$on(HIDE_LOADING, () => {
        this.showLoading = false
    }
  },
}
</script>
 

ajax請求中統一做處理

以ajax請求為例，可以在beforeSend和complete鉤子函式中emit對應的隱藏和顯示事件。

new Promise((resolve, reject) => {
    let defaultOpt = {
      url,
      type: config.method || 'POST',
      data: params || {},
      timeout: 50000,
      contentType: 'application/x-www-form-urlencoded',
      dataType: json
    }

    defaultOpt.beforeSend = (xhr, settings) => {
      if(config.setLoad){
        Bus.$emit(SHOW_LOADING)
      } else {
        Bus.$emit(HIDE_LOADING)
      }
    }

    defaultOpt.complete = () => {
      Bus.$emit(HIDE_LOADING)
    }

    $.ajax(defaultOpt)
  })
 

將bus註冊在多頁面的應用的main.js中

由於每個頁面都有可能用到這個效果，這時候會在全域性註冊一些公共的元件，這樣哪個頁面需要用到，不需要重新引入，直接呼叫元件即可。

import Vue from 'vue'
import App from './App.vue'
import bus from 'utils/bus'
import components from 'utils/components.js'

// 註冊統一的bus應用
Vue.prototype.$bus = bus
// 全域性註冊元件
Vue.use(components)

new Vue({
  render: h => h(App)
}).$mount('#app')

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

components.js裡放置需要全域性註冊的元件

import Loading from 'components/Loading.vue'
export default (Vue) => {
  Vue.component('Loading', Loading)，
  // 其他元件
}

額外需要注意的

用的時候直接引入到需要的頁面即可。
但是會有一個小小的問題，假設某個頁面在created裡就要請求介面，這時候Bus.$emit(SHOW_LOADING) 會無法被接收到。因為這時候Loading元件還未能載入完成，Bus.$on(SHOW_LOADING)還未能註冊上。所以，臨時的解決方案是將請求先放在mounted鉤子裡。