时间戳

首页 > 解决方案 > 延迟加载vue时向用户显示加载屏幕

javascript - 延迟加载vue时向用户显示加载屏幕

问题描述

我正在使用 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>

我认为它会在等待新页面加载时执行淡出动画。但实际上我的应用程序屏幕没有做动画，感觉就像应用程序挂起（但按钮仍在工作）。

所以我想可能是当用户单击以导航新页面然后在加载页面时我想删除或隐藏当前页面以指示某些东西正在工作并且用户没有多次点击按钮认为网络没有响应。

标签： javascriptvue.jslazy-loading

解决方案

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

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

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

推荐阅读