วิธีเปลี่ยนหน้าให้ราบรื่นด้วย Vuetify

คุณสามารถตั้งค่าพารามิเตอร์การโหลดทั่วโลกและกำหนดให้เป็นเท็จตามค่าเริ่มต้น จากนั้นตั้งค่าเป็นจริงใน 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>

สิ่งเหล่านี้จะไม่ถูกเรียกหากคุณใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์ ดังนั้นคุณต้องทำการเรียกการโหลดในวิธีการที่เรียกว่าการเริ่มต้น