Vue.js:如何在应用程序加载前显示加载语句而不是白页
Vue.js:如何在应用程序加载前显示加载语句而不是白页
提问于 2020-01-25 16:50:37
当打开一个新的Vue.js页面时，一个白色页面会出现一段时间，直到整个应用程序加载。我多次尝试用传统的方式把装入语句放在第一位，但问题是，即使装入语句也需要一段时间才能加载和出现，以取代白色页面。
<div id="app">
<template>
<div id="app">
<v-app>
<navbar></navbar>
<v-content class="mx-sm-12 mt-8 mx-1">
<router-view />
</v-content>
</v-app>
</div>
</template>
<script>
import navbar from "./components/navbar";
export default {
components: {
navbar
}
}
</script>回答 2
Stack Overflow用户
回答已采纳
发布于 2020-01-27 10:43:02
您的html将首先下载并呈现。您应该在index.html中加载。
下载JS (Vue构建文件)后，它将替换index.html中的<div id="app"></div>。
我解决了这个加载问题，我的index.html是这样的：
<html>
<head>
...
</head>
<body>
<div id="app">
<div id="loading__container">
<div>some animation and text to indicate loading...</div>
</div>
</div>
<style>
#loading__container {
// animation style
}
</style>
<script type='text/javascript'>
var loading = document. getElementById("loading__container")
// ... do things with the loading container
</script>
</body>
</html>Stack Overflow用户
发布于 2020-01-27 11:23:56
HTML
<div id="app" v-cloak></div>
CSS:将以下样式添加到CSS文件中
[v-cloak] > * { display:none } [v-cloak]::before { content: "Loading…" }
你可以使用动画gif代替‘加载’文本。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59907737
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号