refactor: keep alive

src/layout/components/AppMain.vue

@@ -1,11 +1,19 @@
 <template>
-  <router-view v-slot="{ Component }">
+  <router-view v-slot="{ Component, route }">
-    <component :is="Component" v-if="appStore.reloadFlag" />
+    <KeepAlive :include="keepAliveRouteNames">
+      <component :is="Component" v-if="appStore.reloadFlag" :key="route.meta?.key || route.fullPath" />
+    </KeepAlive>
   </router-view>
 </template>
 
 <script setup>
 import { useAppStore } from '@/store/modules/app'
-
+import { useRouter } from 'vue-router'
 const appStore = useAppStore()
+const router = useRouter()
+
+const allRoutes = router.getRoutes()
+const keepAliveRouteNames = computed(() => {
+  return allRoutes.filter((route) => route.meta?.keepAlive).map((route) => route.name)
+})
 </script>

src/layout/components/sidebar/components/SideMenu.vue

@@ -6,7 +6,7 @@
     :collapsed-icon-size="22"
     :collapsed-width="64"
     :options="menuOptions"
-    :value="(currentRoute.meta && currentRoute.meta.activeMenu) || currentRoute.name"
+    :value="curRoute.meta?.activeMenu || curRoute.name"
     @update:value="handleMenuSelect"
   />
 </template>
@@ -19,9 +19,9 @@ import { useAppStore } from '@/store/modules/app'
 import { renderCustomIcon, renderIcon } from '@/utils/icon'
 
 const router = useRouter()
+const curRoute = useRoute()
 const permissionStore = usePermissionStore()
 const appStore = useAppStore()
-const { currentRoute } = router
 
 const menuOptions = computed(() => {
   return permissionStore.menus.map((item) => getMenuItem(item)).sort((a, b) => a.order - b.order)
@@ -87,7 +87,7 @@ function handleMenuSelect(key, item) {
   if (isExternal(item.path)) {
     window.open(item.path)
   } else {
-    if (item.path === currentRoute.value.path) {
+    if (item.path === curRoute.path) {
       appStore.reloadPage()
     } else {
       router.push(item.path)

src/layout/components/tags/ContextMenu.vue

@@ -72,10 +72,15 @@ const options = computed(() => [
   },
 ])
 
+const route = useRoute()
 const actionMap = new Map([
   [
     'reload',
     () => {
+      if (route.meta?.keepAlive) {
+        // 重置keepAlive
+        route.meta.key = +new Date()
+      }
       appStore.reloadPage()
     },
   ],

src/views/demo/base/keep-alive/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <CommonPage>
+    <div w-350>
+      <n-input v-model:value="inputVal" />
+      <n-input-number v-model:value="number" mt-30 />
+    </div>
+  </CommonPage>
+</template>
+
+<script setup>
+defineOptions({ name: 'KeepAlive' })
+
+const inputVal = ref('')
+const number = ref(0)
+
+onMounted(() => {
+  $message.success('onMounted')
+})
+
+onUnmounted(() => {
+  $message.error('onUnmounted')
+})
+
+onActivated(() => {
+  $message.info('onActivated')
+})
+onDeactivated(() => {
+  $message.warning('onDeactivated')
+})
+</script>

src/views/demo/base/route.js

@@ -38,5 +38,15 @@ export default {
         icon: 'material-symbols:auto-awesome-outline-rounded',
       },
     },
+    {
+      name: 'KeepAlive',
+      path: 'keep-alive',
+      component: () => import('./keep-alive/index.vue'),
+      meta: {
+        title: 'KeepAlive',
+        icon: 'material-symbols:auto-awesome-outline-rounded',
+        keepAlive: true,
+      },
+    },
   ],
 }

src/views/demo/editor/md-editor.vue

@@ -19,6 +19,8 @@
 import MdEditor from 'md-editor-v3'
 import 'md-editor-v3/lib/style.css'
 
+defineOptions({ name: 'MDEditor' })
+
 // refs
 let post = ref({})
 let btnLoading = ref(false)

src/views/demo/route.js

@@ -22,6 +22,7 @@ export default {
         icon: 'ic:baseline-table-view',
         role: ['admin'],
         requireAuth: true,
+        keepAlive: true,
       },
     },
     {
@@ -33,6 +34,7 @@ export default {
         icon: 'ri:markdown-line',
         role: ['admin'],
         requireAuth: true,
+        keepAlive: true,
       },
     },
   ],

src/views/demo/table/index.vue

@@ -88,6 +88,8 @@ import { useCRUD } from '@/composables'
 import api from './api'
 import { isNullOrUndef } from '@/utils/is'
 
+defineOptions({ name: 'CrudTable' })
+
 const $table = ref(null)
 /** QueryBar筛选参数（可选） */
 const queryItems = ref({})