如何解决页面开始加载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
}));
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。