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

Question

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

据我了解，使用 v-if 标记和我的 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 中的所有内容都将被隐藏。