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>