Ahm*_*sam 1 javascript vue.js vue-router vue-component
当打开一个新的 Vue.js 页面时，会出现一个白色页面，直到整个应用程序加载完毕。我试过很多次用传统的方式把loading语句放在最前面，但是问题是连loading语句都需要一段时间才能加载出现，替换白页。
<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>
您的 html 将被下载并首先呈现。您应该在 index.html 中加载。
下载 JS（Vue 构建文件）后，它将替换<div id="app"></div>index.html 中的 。
我通过让我的 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>
小智 5
HTML
<div id="app" v-cloak></div>
CSS：将以下样式添加到 CSS 文件中
[v-cloak] > * { display:none }
[v-cloak]::before { content: "Loading…" }
您可以使用动画 gif 而不是“加载”文本。