【vue】使用provide，inject来刷新页面

问题：使用其他方式刷新当前页面有时会出现一段时间的空白，用户体验不好(利用这些方式来重新加载数据也不好)

provide代码：

//被控制页面
<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
export default  {
  name:  'App',
  provide(){
    return {
      //方法定义在provide中传给inject
      reload: this.reload
    }
  },
  data(){
    return {
      isRouterAlive: true
    }
  },
  methods:{
    //定义刷新方法
    reload(){
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    }
  }
}
</script>

inject代码：

//控制页面
<template>
  <!--此处控制刷新-->
  <div @click="handleClick"></div>
</template>

<script>
export default {
  inject:['reload'],
  methods:{
    handleClick(){
      // 重新加载当前页面
      this.reload();
    }
  }
};
</script>

provide和inject可以跨组件传递变量和方法