Vue.js：如何在应用程序加载之前显示加载状态而不是白色页面

Question

Vue.js：如何在应用程序加载之前显示加载状态而不是白色页面

5

当打开一个新的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>

- Ahmed Hossam

1

你如何添加你的传统方式？ - Qonvex620

我认为你应该使用懒加载来加载你的模块，这样就不会花费任何时间来加载应用程序，因此渲染加载语句变得过时，因为没有人会看到它。 - DF_

嗨，Ahmed！你解决了你的问题吗？我正在尝试在Vue应用程序的初始加载期间添加动画。我可以看到图片，但动画不起作用。你能告诉我一些解决这个问题的技巧吗？ - Cardoso

2个回答

9

HTML

<div id="app" v-cloak></div>

CSS: 将以下样式添加到CSS文件中

[v-cloak] > * { display:none } [v-cloak]::before { content: "加载中..." }

你可以使用动态GIF代替“加载中”文本。

- Julfiker

2

太棒了！我正在寻找这个解决方案！！ - guilieen

1

将动画添加到index.html应用程序id元素是一个好主意，只需放置<progress></progress>即可显示进度条，而无需任何css。然而，当创建vue实例并启动js时，页面将再次变为空白，因为它解析路由器文件、main.js app.vue等。这就是您可能需要第二个动画的地方。目前还不确定如何解决这个问题。 - Ricky-U

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chop TRAN · Accepted Answer

您的HTML文件将首先被下载和渲染，因此您应该在index.html中加载您的loading。

当JS文件（Vue打包文件）下载完毕后，它将替换index.html中的<div id="app"></div>。

我通过以下方式解决了这个加载问题：

<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>