如何在页面开始加载 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 个解决方案： async route和async component 。

异步路由

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

路由.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
}));