vue3 provide inject实现强制刷新

1、在 App.vue 文件里写入 provide 的方法

<template>
<div id="app">
    <keep-alive> 
        <router-view v-if="isRouterAlive"></router-view>
    </keep-alive>
</div>
</template>
<script>
export default {
    name: 'App',
    provide () {  // 在祖先组件中通过 provide 提供变量
        return {
            reload: this.reload()  //  声明一个变量
        }
    },
    data () {
        return {
            isRouterAlive: true  // 控制 router-view 是否显示达到刷新效果
        }
    },
    methods: {
        // provide中声明的变量
        reload (){// 通过 this.isRouterAlive 控制 router-view 达到刷新效果
            this.isRouterAlive = false 
            this.$nextTick(function () {
                this.isRouterAlive = true
            })
        }
    }
}
</script>

2、子孙组件中 inject 引用声明的变量

<template>
<div class="page"><button @click="reloadFun">刷新</button>
</div>
</template><script>
import Vue from 'vue';
export default {
    inject:['reload'], // 使用 inject 注入 reload 变量 
    data(){
        return{}
    },
    methods: {
        reloadFun(){
            this.reload();  
            // 直接使用
    }
},mounted() {}}
</script>

  <div>
    <router-view v-slot="{ Component }" v-if="isRouterAlive">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>