vue实现刷新页面经典篇。避免闪屏。

app.vue 定义全局刷新页面的方法。其他页面需要时直接调用，下面会写调用方法，避免闪屏

<template>
  <div id="app">
     <keep-alive :include="arr">
           <router-view  v-if="isRouterAlive"/>
    </keep-alive>
  </div>
</template>
<script>
export default {
  name:'app',
  provide(){
    return{
      reload:this.reload,
    }
  },
  data(){
    return{
      isRouterAlive:true,
    }
  },
  methods:{
    reload(){                    // 刷新页面
        this.isRouterAlive = false;
        this.$nextTick(function(){
        this.isRouterAlive = true
      })
    }
  }
}
</script>
<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif; 
  // background: url(../public/img/votbeijing.png) no-repeat center center;
  background: rgb(188, 178, 197);
  background-size: cover;
  background-attachment: fixed;
}


</style>

home.vue 需要调用刷新的页面

<div class="home">
</div>
<script>
export default {
    name: "Home",
    inject:['reload'],   //调用刷新
    data(){
         return{
         
         }
    },
    mounted(){
          this.reload();   // 放到需要刷新页面的方法里，刷新。
   } 
    
}
</script>