Vue3使用provide和inject对页面进行刷新

首先,需要修改一下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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容