Question

我是Vue / Vuetify的新手，并且对高速缓存刷新（在Chrome中）上的页面转换/渲染有疑问：

例如，我在项目中集成了一个小片段：codepen.io/vreaxe/pen/oeWwOJ。
现在，当我缓存刷新（Ctrl + f5）页面（在Chrome中进行测试）时，我会在短时间内看到内容，例如this。之后，我看到了呈现的页面，如this。
现在，我想知道如何解决此问题，因此在页面完全呈现之前我看不到内容，还是呈现问题呢？
Here是其外观的一个示例。每次刷新时，页面都能完美呈现，并且过渡很短，但是我无法找到实现方法。

Answer 1

您可以设置一个全局加载参数，默认情况下将其设置为false，然后在beforeMount中将其设置为true，在mount中将其设置为false。

//store/index.js
...
state: {
  loading: false,
},


//yourComponent.vue
<template>
  <div v-if="this.$store.state.loading">
   //a spinner or progress bar
  </div>
  <div v-else>
  //your component code
  </div>
</template>

<script>
 export default {
    beforeMount() {
      this.$store.state.loading = true
    }
    mounted() {
      this.$store.state.loading = false
    }
  }
</script>

如果您正在使用服务器端渲染，则不会调用这些，因此您必须使用在初始化时调用的方法进行加载调用。

如何使用Vuetify获得平滑的页面过渡

1 个答案: