diff --git a/src/App.vue b/src/App.vue
index 09f8540..f0dc247 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,16 +3,11 @@ import AppProvider from '@/components/AppProvider/index.vue'
 </script>
 
 <template>
-  <router-view>
-    <template #default="{ Component, route }">
-      <app-provider>
-        <keep-alive v-if="route.meta && route.meta.keepAlive">
-          <component :is="Component" :key="route.fullPath" />
-        </keep-alive>
-        <component :is="Component" v-else :key="route.fullPath" />
-      </app-provider>
-    </template>
-  </router-view>
+  <app-provider>
+    <router-view v-slot="{ Component }">
+      <component :is="Component" />
+    </router-view>
+  </app-provider>
 </template>
 
 <style lang="scss">
diff --git a/src/components/AppProvider/index.vue b/src/components/AppProvider/index.vue
index 1d0069d..5763368 100644
--- a/src/components/AppProvider/index.vue
+++ b/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>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index c61d73e..6ca4335 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,9 +1,19 @@
 <template>
-  <router-view>
-    <template #default="{ Component, route }">
-      <transition name="fade-slide" mode="out-in" appear>
-        <component :is="Component" :key="route.fullPath"></component>
-      </transition>
-    </template>
+  <router-view v-slot="{ Component, route }">
+    <transition name="fade-slide" mode="out-in" appear>
+      <keep-alive :include="keepAliveRouteNames">
+        <component :is="Component" :key="route.path" />
+      </keep-alive>
+    </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>
diff --git a/src/router/routes/index.js b/src/router/routes/index.js
index 8ad7d47..8de97c3 100644
--- a/src/router/routes/index.js
+++ b/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,
+        },
+      },
     ],
   },
 
diff --git a/src/views/test-page/TestKeepAlive.vue b/src/views/test-page/TestKeepAlive.vue
new file mode 100644
index 0000000..801bede
--- /dev/null
+++ b/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>