SoFunction
Updated on 2025-03-10

How to improve user experience by flashing when vue refreshes page

First add it to the outermost divv-if="isReloadAlive", and create variablesisReloadAlive = true

Then add provide() and reload methods, as follows:

export default {
 provide() {
  return {
  reload: 
  }
 },
 data(){
 isReloadAlive : true
 },
 methods: {
 reload() {
    = false;
   this.$nextTick(function(){
     = true;
   })
  }
 }

Last call()Just

Supplement: Let's take a look at vue to solve the flashing problem during refresh

1. Add v-cloak to the div of the vue container

<div v-cloak>

2. Add to style files

 <style type="text/css">
  [v-cloak] {
   display: none !important;
  }
 </style>

Summarize

The above is the method of improving the experience when refreshing the vue page, which I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!