Vue reload解决刷新出现空白页面

2022.12.1今天我学习了如何使用reload()来解决刷新会出现空白页面的问题。

一、App.vue文件

 <template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>
<script>
export default {
  name: "App",
  data(){
    return{
      isRouterAlive:true
    }
  },
  provide(){
    return{
      reload:this.reload
    }
  },
  methods:{
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(()=>{
        this.isRouterAlive = true
      })
    }
  },
  
};

</script>

二、在需要刷新的页面中

export default {
 // 调用APP.vue实时页面更新的方法
  inject: ['reload'],


method:{

//xxx表示需要刷新页面的方法名

    xxx(){
    this.reload()
        }

   //如果this.reload()没效果就加个if判断

  //如通用写法
  if(this.request == 2){
    this.reload()
   }
  }
}