使用（provide/inject）刷新页面交互体验比较好。

在App.vue文件下(有router-view路由出口的页面)

<!-- App.vue -->
<template>
  <router-view v-if="isRouterAlive"></router-view>
  <!-- 在router-view使用isRouterAlive或者是下面这种在组件中使用 -->
  <!-- <BLank v-if="isRouterAlive"></BLank> -->
</template>

<script setup>
import { ref, nextTick, provide } from "vue";
import BLank from "@/components/BLank.vue";
 // 局部组件刷新
    const isRouterAlive = ref(true);
    const reload = () => {
      isRouterAlive.value = false;
      nextTick(() => {
        isRouterAlive.value = true;
      });
    };
    provide("reload", reload);

</script>

在test.vue对上面定义的方法进行调用

<!-- test.vue -->
<template>
  <div>
    <!-- input框输入值，点击按钮，看值会不会清空 -->
    <input type="text"> 
  </div>
  <button @click="ceshi">测试按钮</button>
</template>
<script setup>
import { inject } from "vue";
const ceshi = inject("reload");
</script>

作者：柒落
链接：https://juejin.cn/post/7096744577071054879
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。