如何使用 Vuetify 获得平滑的页面转换答案

【问题标题】：How to get a smooth page transition with Vuetify如何使用 Vuetify 获得平滑的页面转换
【发布时间】：2019-04-17 22:53:44
【问题描述】：

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

例如，我在我的项目中集成了一个小片段：codepen.io/vreaxe/pen/oeWwOJ。
当我现在缓存刷新 (Ctrl+f5) 页面（在 Chrome 中测试）时，我会在短时间内看到内容，例如 this。之后，我看到像this 这样的渲染页面。
现在我想知道如何解决这个问题，所以在页面完全呈现之前我看不到内容，还是呈现问题不是问题？
Here 是它的外观示例。在任何刷新时，页面都会完美呈现，并且有一个短暂的过渡，但我不知道如何达到这一点。

【问题讨论】：

标签： vue.js vuejs2 vuex vue-router vuetify.js

【解决方案1】：

你可以设置一个全局加载参数，默认设置为 false，然后在 beforeMount 中设置为 true，在mounted 中设置为 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>

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

【讨论】：