为什么在 Vue3 中 <keep-alive> 包裹 <router-view> 不生效？

Question

Vue3 router keep-alive失效的问题
最近在写课设，第一次接触前端，在写到一个需要缓存的界面的时候想使用keep-alive发现不起作用
路由的结构如下，app.vue下使用<router-view></router-view>挂载组件

|app.vue
    |login
      |home(缓存该组件的所有子组件）
        |inform
        |edit
        |....

其中home组件使用了<keep-alive></keep-alive>包裹子组件，如下

<el-container style="height:92vh; width:88vw ; background-color: antiquewhite;">
            <el-main>
              <keep-alive>
                <router-view >
                </router-view>
              </keep-alive>
            </el-main>
          </el-container>
</el-container>

我在其中一个组件inform.vue的钩子函数中输出如下

onMounted(() => {
    console.log("通知加载");
})
onActivated(() => {
       console.log('组件已激活（从缓存中恢复）');
});

当我在界面中切换组件，前进和后退都只会触发“通知加载”，只有在刷新页面的时候才会输出“组件已激活（从缓存中恢复）”
路由部分设置如下

const routes = [
    {
        path: '/',
        redirect: '/home/inform',
    },
    {
        path: "/home",
        name: "/home",
        component: () => import("../pages/Home.vue"),
        children: [
            {
                path: "/home/inform",
                name: "inform",
                component: () => import("../pages/HomePage/Inform.vue")
            },
            {
                path: "/home/editItem",
                name: "editItem",
                component: () => import("../pages/StudentMenu/SaqTable.vue")
            },
            {
                path: "/home/approvalFirstWork",
                name: "approvalFirstWork",
                component: () => import("../pages/ApprovalMenu/ApprovalFirstWork.vue")
            },
        ]
    },

如果正常生效的话应该来回切换只会触发onActivated函数吧？搜了网上很多资料，看过社区的回答，设置过例如:include，似乎也没能成功,尝试了都没能成功，求解答

Answer 1

改成这样试试

<RouterView v-slot="{ Component }">
  <template v-if="Component">
    <Transition mode="out-in">
      <KeepAlive>
        <Suspense>
          <!-- 主要内容 -->
          <component :is="Component"></component>

          <!-- 加载中状态 -->
          <template #fallback>
            正在加载...
          </template>
        </Suspense>
      </KeepAlive>
    </Transition>
  </template>
</RouterView>