Cara mendapatkan transisi halaman yang lancar dengan Vuetify

Saya baru mengenal Vue/Vuetify dan memiliki pertanyaan tentang transisi/render halaman saat penyegaran cache (di Chrome):

  1. Misalnya, saya mengintegrasikan potongan kecil ke dalam proyek saya: codepen.io/vreaxe/pen/oeWwOJ.

  2. Saat saya sekarang melakukan cache-refresh (Ctrl+f5) halaman (diuji di Chrome) saya melihat konten untuk waktu yang singkat seperti ini. Setelah itu, saya melihat halaman yang dirender seperti ini.

  3. Sekarang saya bertanya-tanya bagaimana cara memperbaikinya, jadi saya tidak melihat konten sebelum halaman dirender sepenuhnya atau bukankah rendering yang menjadi masalah untuk itu?

  4. Berikut adalah contoh tampilannya. Pada penyegaran apa pun, halaman ditampilkan dengan sempurna dan memiliki transisi singkat di dalamnya, tetapi saya tidak tahu cara mencapainya.


vue.js vuetify.js vuex vue-router vuejs2
person Marvin Kramer    schedule 14.11.2018    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

Anda dapat menyetel parameter pemuatan global dan menjadikannya salah secara default, lalu menyetelnya ke true di beforeMount dan false di mount.

//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>

Ini tidak dipanggil jika Anda menggunakan rendering sisi server sehingga Anda harus melakukan panggilan pemuatan dalam metode yang dipanggil pada inisialisasi.

person Andrew1325    schedule 14.11.2018