[英]How to run preloader before page starts loading VUE.JS
So I'm trying to set up a preloader but before it starts running the preloader it starts downloading a lot of CSS/js etc files which should not happen since the preloader should run before it starts downloading vue stuff and only stops when the page is ready.所以我试图设置一个预加载器,但在它开始运行预加载器之前,它开始下载很多 CSS/js 等文件,这不应该发生,因为预加载器应该在它开始下载 vue 内容之前运行,并且只在页面出现时停止准备好。 This problem is not noticed in fast connections but it's very clear under FAST 3G or SLOW 3G.
此问题在快速连接中不会被注意到,但在 FAST 3G 或 SLOW 3G 下非常明显。
I saw some examples using vue routing but I'm routing Vue with flask which means that I shouldn't be able to use the routing way at least that I know.我看到了一些使用 vue 路由的例子,但我用 Flask 路由 Vue,这意味着我不应该至少使用我知道的路由方式。
Is there a way to set it up so it loads the preloader and then starts loading the other stuff in the background?有没有办法设置它以便加载预加载器然后开始在后台加载其他东西?
I'm using vue plugin Vue-loading-overlay for the preloader.我正在为预加载器使用 vue 插件Vue-loading-overlay 。
Part of my code in case it's necessary:我的代码的一部分,以防万一:
<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>
I can think of 2 solutions: async route , and async component .我可以想到 2 个解决方案: async route和async component 。
Here in the routes.js file we define main route /
with a simple LoginPage
component which will be included in the main JS bundle file.在routes.js文件中,我们使用一个简单的
LoginPage
组件定义主路由/
,该组件将包含在主JS 包文件中。 We also define /app
route with an async component - this one would be loaded only if user open /app
route.我们还定义了一个带有异步组件的
/app
路由 - 只有当用户打开/app
路由时才会加载这个。 A comment with webpackChunkName
tells Webpack to compile that component to another file with that specific name.带有
webpackChunkName
的注释告诉 Webpack 将该组件编译为具有该特定名称的另一个文件。
routes.js路由.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
]
}
]
Now in Your login-page
component You can do some stuff, like loading config by AJAX, and then go to /app
route.现在在您的
login-page
组件中,您可以执行一些操作,例如通过 AJAX 加载配置,然后转到/app
路由。
Another solution could be using a dynamic component .另一种解决方案可能是使用动态组件。 Initially it could be a simple
loaderComponent
and after loading finishes it would become appWrapperComponent
and only then its definition would be loaded from another bigger chunk file.最初它可能是一个简单的
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
});
}
}
Now to make it work we need to make appWrapperComponent
async.现在为了让它工作,我们需要使
appWrapperComponent
异步。
Vue.component('appWrapperComponent', () => ({
component: import('../pages/app-wrapper.vue' /* webpackChunkName: "pages--app-wrapper" */),
delay: 200,
timeout: 5000
}));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.