使用inject和provide对页面进行刷新
1.在 < script setup> 中
- 定义了 isRouterAlive 状态变量,用于控制路由是否存活。 定义了 reload 函数,用于重新加载路由。该函数将
- isRouterAlive 设置为 false,然后在下一个事件循环中将其设置为 true。
- 使用 provide 函数将 reload
函数提供给子组件使用。
2.在 < template> 中:
- 使用 RouterView 组件渲染当前路由对应的组件。
- 添加了 v-if=“isRouterAlive” 条件,确保只有当 isRouterAlive 为 true 时才渲染路由组件。
- 添加了 < transition name=“fade”> 元素,使用 fade 过渡效果来切换路由组件。
使用方法:
在app.vue页面添加provide
<script setup>
import { ref, provide, nextTick } from 'vue'
const isRouterAlive = ref(true) // 路由是否存活
const reload = () => { // 重新加载路由
isRouterAlive.value = false
nextTick(() => {
isRouterAlive.value = true
})
}
provide('reload', reload) // `reload` 函数提供给子组件使用
</script>
<template>
<div class="app">
<RouterView v-slot="{ Component }" v-if="isRouterAlive">
<transition name="fade">
<component :is="Component" />
</transition>
</RouterView>
</div>
</template>
在子页面中调用即可
3.在子组件的 < script setup> 中:
- 使用 inject 函数获取 reload 函数。
- 定义了 btn 函数,在点击按钮时调用 reload 函数重新加载路由。
<template>
<button @click="btn"></button>
</template>
<script setup>
const reload = inject('reload') // 获取 reload 方法
const btn= () => {
reload()
}
</script>