首先,需要修改一下app.vue文件,通过reload方法来控制router-view的显示或者隐藏
<template> <router-view v-if="isRouterAlive" /></template><script lang="ts" setup>import {provide, ref, nextTick} from 'vue' const isRouterAlive = ref(true) const reload = () => { isRouterAlive.value = false void nextTick(() => { isRouterAlive.value = true }) } provide('reload', reload)</script>
在子页面中使用inject调用provide的方法
<script lang="ts" setup>import {inject} from 'vue' const refresh = inject('reload') const handle = async () => { await ... refresh() }</script>