vue3 无感知刷新页面（无痛刷新）

使用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>