Как получить плавный переход на страницу с Vuetify

Question

Я новичок в Vue / Vuetify и у меня есть вопрос о переходе / рендеринге страницы при обновлении кэша (в Chrome):

1. Например, я добавил небольшой отрыванный фрагментв моем проекте: codepen.io/vreaxe/pen/oeWwOJ.

2. Когда я сейчас обновляю кеш (Ctrl + f5) страницы (протестировано в Chrome), я вижу содержимое длякороткое время, как это .После этого я вижу обработанную страницу как this .

3. Теперь мне интересно, как это исправить, поэтому я не вижу содержимого перед страницейполностью рендерится или это не проблема рендеринга?

4. Здесь - пример того, как это должно выглядеть.При любом обновлении страница отображается идеально и имеет короткий переход, но я не мог найти, как этого достичь.

Answer 1

Вы можете установить глобальный параметр загрузки и установить для него значение false по умолчанию, а затем установить значение true в beforeMount и 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>

Они не вызываются, если вы используете рендеринг на стороне сервера, поэтому вы должны выполнить загрузочный вызов в методе, который вызывается при инициализации.