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

Question

所以我正在尝试设置一个预加载器，但在它开始运行预加载器之前，它开始下载很多 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>

Answer 1

我能想到 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
}));

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

How to run preloader before page starts loading VUE.JS

javascript

preloader

vue.js

vue-router

vuejs2

异步路由

异步组件

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

How to run preloader before page starts loading VUE.JS

javascript

preloader

vue.js

vue-router

vuejs2

异步路由

异步组件

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