延遲加載 vue 時向用戶顯示加載屏幕

Question

我正在使用 laravel mix 5 為我的水療中心 vue.js 制作延遲加載功能

現在我想知道如何顯示一些東西，比如加載頁面，這樣我的應用程序就不會在應用程序加載新頁面時掛起。

我試着添加這個

<template>
<div>
    <!-- header -->
    <transition 
        enter-active-class="animated fadeInDown"
        leave-active-class="animated fadeOutUp"
        mode="out-in"
    >
        <router-view name="header"></router-view>
    </transition>
    
    <!-- body -->
    <transition 
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
        mode="out-in"
    >
        <router-view></router-view>
    </transition>
    
</div>
</template>

我認為它會在等待加載新頁面時執行 fadeOut animation。 但實際上我的應用程序屏幕沒有執行 animation 並且感覺應用程序已掛起（但按鈕仍在工作）。

所以我想可能是當用戶單擊導航新頁面然后在加載頁面時我想刪除或隱藏當前頁面以指示某些東西正在工作並且用戶沒有多次點擊按鈕認為 web 沒有響應。

Answer 1

好吧，在做了一些更深入的搜索后，我終於找到了解決方案

首先，您需要使用 vuex 傳遞變量或信息，然后像這樣將其掛接到路由器 function

router.beforeEach((to, from, next)=>{
  store.commit('setLoading', true)
  next()
})
router.afterEach((to, from)=>{
  store.commit('setLoading', false)
})

然后在我的app.vue文件中添加這個

<template>
<div>
    <!-- header -->
    <transition 
        enter-active-class="animated fadeInDown"
        leave-active-class="animated fadeOutUp"
        mode="out-in"
    >
        <router-view name="header"></router-view>
    </transition>
    
    <!-- body -->
    <transition 
        enter-active-class="animated fadeIn"
        leave-active-class=""
        mode="out-in"
    >
        <loading-page v-if="isLoading"></loading-page>
        <router-view v-else></router-view>
    </transition>
    
</div>
</template>

<script>
    import { mapGetters } from 'vuex';
    import loadingPage from "./views/loading.vue";

    export default {
        components: {
            loadingPage
        },
        computed:{
            ...mapGetters('global',{
                isLoading: 'isLoading'
            }),
        },
    }
</script>

這是我的加載屏幕，只是一個帶有加載欄的簡單頁面

<template>
    <div>
        <!-- page container -->
        <div class="page-content">
            <div class="content-wrapper">
                <div class="content">

                    <div class="card card-body">
                        <div class="progress">
                            <div class="progress-bar progress-bar-info progress-bar-striped progress-bar-animated" style="width: 100%">
                                <span class="sr-only">100% Complete</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        
    </div>
</template>

對於我的 vuex

export const global = {
  namespaced: true,
  
  // state
  state: {
    isLoading: '',
  },

  // getters
  getters: {
    isLoading: state => state.isLoading,
  },

  // actions
  actions: {

    // change data
    setLoading({commit}, type){
      commit('setLoading', type);
    },
  },

  // mutations
  mutations: {

    setLoading ( state, type ){
      state.isLoading = type;
    },
  }
}

然后每當我導航到尚未在用戶瀏覽器中加載的其他頁面時，它只會顯示加載屏幕。