首先，需要修改一下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>
网友评论