Блог

я создаю функции отложенной загрузки для своего spa vue js, используя laravel mix 5

и прямо сейчас я хочу знать, как показать что-то вроде страницы загрузки, чтобы мои приложения не зависали, пока приложения загружают новую страницу.

я попытался добавить это

 <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>
  

я думал, что он будет выполнять анимацию затухания во время ожидания загрузки новой страницы. Но на практике экран моего приложения не выполняет анимацию, и кажется, что приложения зависают (но кнопка все еще работает).

итак, я представляю, что, возможно, когда пользователь нажимает, чтобы перейти на новую страницу, а затем во время загрузки страницы я хочу удалить или скрыть текущую страницу, чтобы указать, что что-то работает, и пользователь не нажимает кнопку несколько раз, думая, что Интернет не реагирует.

хорошо, выполнив еще несколько углубленных поисков, я, наконец, нашел решение

сначала вам нужно использовать vuex для передачи переменной или информации, а затем вы просто подключаете ее к функции маршрутизатора следующим образом

 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;
    },
  }
}
  

тогда он будет просто показывать этот экран загрузки всякий раз, когда я перехожу на другую страницу, которая еще не загружена в браузере пользователя.