实现无感刷新页面

当我们刷新当前页面时使用location.reload()或者this.$router.go(0)会使页面存在一小段时间的白屏，体验不是很好

使用provide/inject方式解决白屏问题

在项目的App.vue文件中添加provide

export default {
  components: {},
  provide() {
    return {
      reload: this.reload // 向下提供刷新方法
    }
  },
  data() {
    return {
      isRouterAlive: true  
    }
  },
  methods: {
    reload() {
      // 通过改变router状态刷新页面
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}

在router-view中添加判断从而实现刷新

<router-view v-if="isRouterAlive" />

在需要刷新页面的组件(child.vue)注入reload方法

 export default {
 components: {},
  inject: [
   'reload'
 ],
 methods: {
   // 刷新方法
   test() {
     this.reload()
   }
}