Vue.js 显示用户刷新页面时应由 v-if 标记隐藏的内容

Question

我有一个 Vue.js 应用程序，它在 created() 方法中加载内容。我使用 v-if 标签隐藏我的所有 UI，直到该内容加载完毕并准备就绪。它在初始加载时运行良好，但如果用户在 Chrome 中点击刷新，则应用会显示(瞬间闪烁)不会显示的内容(基于创建时加载的数据)。

据我所知，使用 v-if 标签以及来 self 的 vuex 存储的标志指示加载何时完成，是隐藏内容直到我准备好显示它的正确方法.

如何避免内容在刷新时闪烁？

Answer 1

Vue.JS 使用 v-cloak 指令解决了这个问题。 ( see docs )

将 v-cloak 指令添加到应用程序的根元素中:

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

然后将此 CSS 规则添加到应用程序的样式表中:

[v-cloak] {
  display: none;
}

在 Vue 初始化之前，app div 中的所有内容都将被隐藏。