Как добиться плавного перехода страницы с помощью Vuetify

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

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

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

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

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


vue.js vuetify.js vuex vue-router vuejs2
person Marvin Kramer    schedule 14.11.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

person Andrew1325    schedule 14.11.2018