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

新手上路,请多包涵

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,似乎也没能成功,尝试了都没能成功,求解答

阅读 454
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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏