fix:修复keep-alive失效问题，并添加keep-alive测试页面

src/App.vue

@@ -3,16 +3,11 @@ import AppProvider from '@/components/AppProvider/index.vue'
 </script>
 
 <template>
-  <router-view>
+  <app-provider>
-    <template #default="{ Component, route }">
+    <router-view v-slot="{ Component }">
-      <app-provider>
+      <component :is="Component" />
-        <keep-alive v-if="route.meta && route.meta.keepAlive">
+    </router-view>
-          <component :is="Component" :key="route.fullPath" />
+  </app-provider>
-        </keep-alive>
-        <component :is="Component" v-else :key="route.fullPath" />
-      </app-provider>
-    </template>
-  </router-view>
 </template>
 
 <style lang="scss">

src/components/AppProvider/index.vue

@@ -9,14 +9,13 @@ const appStore = useAppStore()
 
 <template>
   <n-config-provider :theme-overrides="appStore.themeOverrides">
-    <n-global-style />
     <n-loading-bar-provider>
       <loading-bar />
       <n-dialog-provider>
         <dialog-content />
         <n-message-provider>
           <message-content />
-          <slot name="default"></slot>
+          <slot></slot>
         </n-message-provider>
       </n-dialog-provider>
     </n-loading-bar-provider>

src/layout/components/AppMain.vue

@@ -1,9 +1,19 @@
 <template>
-  <router-view>
+  <router-view v-slot="{ Component, route }">
-    <template #default="{ Component, route }">
+    <transition name="fade-slide" mode="out-in" appear>
-      <transition name="fade-slide" mode="out-in" appear>
+      <keep-alive :include="keepAliveRouteNames">
-        <component :is="Component" :key="route.fullPath"></component>
+        <component :is="Component" :key="route.path" />
-      </transition>
+      </keep-alive>
-    </template>
+    </transition>
   </router-view>
 </template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const allRoutes = router.getRoutes()
+const keepAliveRouteNames = computed(() => {
+  return allRoutes.filter((route) => route.meta?.keepAlive).map((route) => route.name)
+})
+</script>

src/router/routes/index.js

@@ -104,6 +104,15 @@ export const basicRoutes = [
           title: '测试Dialog',
         },
       },
+      {
+        name: 'TEST-KEEP-ALIVE',
+        path: 'keep-alive',
+        component: () => import('@/views/test-page/TestKeepAlive.vue'),
+        meta: {
+          title: '测试Keep-Alive',
+          keepAlive: true,
+        },
+      },
     ],
   },
 

src/views/test-page/TestKeepAlive.vue

@@ -0,0 +1,20 @@
+<!--使用keep-alive须设置name，注意请与对应的路由的name保持一致，方便统一处理-->
+<script setup name="TEST-KEEP-ALIVE">
+import { onMounted, onActivated, onDeactivated } from 'vue'
+
+onMounted(() => {
+  $message.success('触发onMounted')
+})
+
+onActivated(() => {
+  $message.success('触发onActivated')
+})
+
+onDeactivated(() => {
+  $message.success('触发onDeactivated')
+})
+</script>
+
+<template>
+  <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 注意查看提示语 </n-gradient-text>
+</template>