懒惰加载vue时向用户显示加载屏幕

Question

我正在使用laravel mix 5 为我的spa 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动画。但在实践中，我的应用程序屏幕没有做动画，感觉应用程序挂起了(但按钮仍在工作(。

所以我想象的是，当用户点击导航新页面时，当页面被加载时，我想删除或隐藏当前页面，以表明某些东西正在工作，而用户没有多次点击按钮，认为网络没有响应。

Answer 1

好吧，在做了更多的深入搜索后，我终于找到了解决方案

首先你需要使用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;
},
}
}

然后，每当我导航到用户浏览器中尚未加载的其他页面时，它就会显示加载屏幕。