vue 巧妙刷新 provide 和 inject

// 导入vue中的相关方法
import { provide, reactive, nextTick } from "vue";

// 定义全局数据
let globeData = reactive({
  isRouterAlive: true
})

// 通过条件渲染来控制router-view的显示
<router-view v-if="isRouterAlive"></router-view>

// 定义一个刷新函数
function reload () {
  // 设置isRouterAlive为false，隐藏router-view
  globeData.isRouterAlive = false;

  // 在下一个tick中，将isRouterAlive设置为true，重新显示router-view
  nextTick(function () {
    globeData.isRouterAlive = true;
  })
}

// 使用provide向下游组件提供reload函数
provide('reload', reload);

在组件中使用刷新功能

// 导入vue的相关方法
import { inject, watch, route } from "vue";

// 从上游组件中获取reload函数
let iload = inject('reload');

// 监听路由变化，调用iload函数进行刷新
watch(route, () => {
  iload();
})