页面开始加载VUE.JS之前如何运行预加载器

问题描述

所以我试图设置一个预加载器，但是在它开始运行预加载器之前，它开始下载很多CSS / js等文件，这应该不会发生，因为预加载器应该在它开始下载vue东西之前运行，并且只会在页面已准备就绪。在快速连接中没有注意到此问题，但在FAST 3G或SLOW 3G中很明显。

我看到了一些使用vue路由的示例，但是我正在用flask路由Vue，这意味着我至少不能使用我所知道的路由方式。

是否可以设置它，以便它加载预加载器，然后开始在后台加载其他内容？

我正在使用vue插件 Vue-loading-overlay作为预加载器。

必要时提供部分代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div id="app">
    <vue-topprogress ref="topProgress" :color="'#1d1d25'"
                     :height="5" :errorColor="'#f81732'"/>
    <loading :active.sync="isLoading"
        :is-full-page="true" :opacity="1">
      <img src="../assets/images/testGif.gif" alt="this slowpoke moves"  width=250/>
    </loading>
  </div>
</template>
<script>
  import Loading from 'vue-loading-overlay';
  import 'vue-loading-overlay/dist/vue-loading.css';

  export default {
    name: 'index',components: {
      Loading,},data() {
      return {
        isLoading: true,};
    },mounted() {
      document.onreadystatechange = () => {
        if (document.readyState === 'complete') {
          this.isLoading = false;
        }
      };
    },}
</script>

解决方法

我可以想到2种解决方案：异步路由和异步组件。

异步路由

在 routes.js 文件中，我们使用简单的/组件定义了主路由LoginPage，该组件将包含在主JS捆绑包文件中。我们还使用异步组件定义了/app路由-仅当用户打开/app路由时才会加载该路由。带有webpackChunkName的注释告诉Webpack将组件编译为具有该特定名称的另一个文件。

routes.js

import LoginPage from '../pages/login-page'

const routes = [
 {
  path: '/',component: LoginPage
 },{
  path: '/app',component: () => import('../pages/app-wrapper.vue' /* webpackChunkName: "page--app-wrapper" */),children: [
   // child routes
  ]
 }
]

现在在login-page组件中，您可以做一些事情，例如通过AJAX加载配置，然后转到/app路由。

异步组件

另一个解决方案可能是使用动态组件。最初，它可能是一个简单的loaderComponent，并且在加载完成后将变成appWrapperComponent，然后才从另一个更大的块文件中加载其定义。

<template>
  <div :is="componentName"></div>
</template>

export {
  data() {
    componentName: 'loaderComponent'
  },components: { loaderComponent },mounted() {
    this.$axios('/api/config.json') // its' just an example of loading something
    .then(config => {
      this.$root.config = config; 
      this.componentName = 'appWrapperComponent'; // this changes component name
    });
  }
}

现在要使其正常工作，我们需要使appWrapperComponent异步。

Vue.component('appWrapperComponent',() => ({
    component: import('../pages/app-wrapper.vue' /* webpackChunkName: "pages--app-wrapper" */),delay: 200,timeout: 5000
}));

javascript preloader vue.js