Vue-如何避免在加载Vue之前出现内容闪烁

Question

我看到我的页眉和页脚，在vue加载和将加载程序应用于页面之前，它们在路由器视图闪存之外停留了几毫秒（请参阅gif）。如何避免这种行为并立即显示加载程序？

我正在使用v-cloak，但似乎不起作用。

App.vue

<template>
  <div 
    id="cq-app"
    @click="handleClicks">
    <div v-cloak style="min-height:100vh;">
      <header-main />

      <transition
        name="fade"
        mode="out-in"
        @after-leave="updateScroll"
      >
        <router-view :key="$route.path" />
      </transition>

      <transition name="fade">
        <site-loading v-if="loading" />
      </transition>

      <footer-main />
    </div>

  </div>
</template>

<script>
import SiteLoading from '@/components/utility/SiteLoading'
import HeaderMain from '@/components/utility/HeaderMain'
import FooterMain from '@/components/utility/FooterMain'

export default {
  components: {
    SiteLoading,
    HeaderMain,
    FooterMain
  },
  data() {
    return {
      site: this.$store.state.site
    }
  },
  computed: {
    loading() {
      return this.$store.state.site.loading
    },
  },
  methods: {
    getLinkEl(el) {
      while (el.parentNode) {
        if (el.tagName === 'A') return el
        el = el.parentNode
      }
    },
    handleClicks (e) {

    },
    updateScroll() {
      window.scroll(0,0)
    },
  },
}
</script>