From 8bcbcac531b00a14e7b4d76dcc6f4c09c5725648 Mon Sep 17 00:00:00 2001
From: zhangchuanlong <zclzone@outlook.com>
Date: Fri, 4 Mar 2022 16:44:33 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8Dkeep-alive=E5=A4=B1?=
 =?UTF-8?q?=E6=95=88=E9=97=AE=E9=A2=98=EF=BC=8C=E5=B9=B6=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?keep-alive=E6=B5=8B=E8=AF=95=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                           | 15 +++++----------
 src/components/AppProvider/index.vue  |  3 +--
 src/layout/components/AppMain.vue     | 22 ++++++++++++++++------
 src/router/routes/index.js            |  9 +++++++++
 src/views/test-page/TestKeepAlive.vue | 20 ++++++++++++++++++++
 5 files changed, 51 insertions(+), 18 deletions(-)
 create mode 100644 src/views/test-page/TestKeepAlive.vue

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>