update: 更新tab保活的逻辑

package.json

@@ -78,7 +78,6 @@
     "@icon-park/vue-next": "^1.4.2",
     "@imengyu/vue3-context-menu": "^1.2.6",
     "@tanstack/vue-query": "^4.29.7",
-    "@tanstack/vue-table": "^8.9.1",
     "@vee-validate/zod": "^4.9.3",
     "@vueuse/core": "^10.1.2",
     "@vueuse/integrations": "^10.1.2",
@@ -89,7 +88,6 @@
     "lodash-es": "^4.17.21",
     "naive-ui": "^2.34.3",
     "pinia": "^2.0.36",
-    "react-dnd-html5-backend": "^16.0.1",
     "sortablejs": "^1.15.0",
     "veboundary": "1.2.2",
     "vee-validate": "^4.9.3",
@@ -97,7 +95,6 @@
     "vue-final-modal": "^4.4.2",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.2.0",
-    "vue3-dnd": "^2.0.2",
     "zod": "^3.21.4"
   },
   "devDependencies": {

src/pages/home/index.vue

@@ -6,12 +6,25 @@ import Local from './local/index.vue';
 import Menu from './menu/index.vue';
 import {NLayout, NLayoutContent} from 'naive-ui';
 import TabList from './tab/index.vue';
-import {RouterView} from 'vue-router';
+import {RouterView, useRoute} from 'vue-router';
+import {computed} from 'vue';
+import {useTabStore} from '@stores';
+import {RouteNameMap} from '@routes';
 
 defineOptions({
   name: 'Home',
 });
 
+const route = useRoute();
+const tabStore = useTabStore();
+
+// 只保留tab上有的页面 销毁的不考虑
+const keepaliveKeys = computed(function() {
+  return tabStore.tabList.map(function(val) {
+    return RouteNameMap.get(val.url);
+  });
+});
+
 </script>
 
 <template>
@@ -32,7 +45,11 @@ defineOptions({
         <section class="content-info">
           <TabList />
           <div class="content-main">
-            <RouterView />
+            <RouterView #="{Component}">
+              <KeepAlive :include="keepaliveKeys">
+                <component :is="Component" :key="route.path" />
+              </KeepAlive>
+            </RouterView>
           </div>
         </section>
       </NLayoutContent>

src/pages/home/menu/hooks.tsx

@@ -3,6 +3,7 @@ import {defineComponent, h, reactive, resolveComponent, watch} from 'vue';
 import {HomeTwo} from '@icon-park/vue-next';
 import {useTabStore, storeToRefs} from '@stores';
 import {find} from 'lodash-es';
+import {useRoute, useRouter} from 'vue-router';
 
 const MenuIcon = defineComponent({
   props: {
@@ -24,15 +25,21 @@ function renderIcon(icon: string) {
 }
 
 export const menuOptions: MenuOption[] = [
-  {label: '首页', key: '-1', icon: renderIcon('HomeMenuIcon'), pid: '0'},
+  {
+    label: '首页',
+    key: '-1',
+    icon: renderIcon('HomeMenuIcon'),
+    pid: '0',
+    url: '/',
+  },
   {
     label: '准入审核',
     key: '1',
     icon: renderIcon('HomeMenuIcon'),
     pid: '0',
     children: [
-      {label: '审核列表', key: '2', pid: '1'},
-      {label: '准入审批', key: '3', pid: '1'},
+      {label: '审核列表', key: '2', pid: '1', url: '/audit'},
+      {label: '准入审批', key: '3', pid: '1', url: '/audit'},
     ],
   },
   {
@@ -40,8 +47,8 @@ export const menuOptions: MenuOption[] = [
     key: '4',
     icon: renderIcon('HomeMenuIcon'),
     children: [
-      {label: '物料信息', key: '5', pid: '4'},
-      {label: 'BOM管理', key: '6', pid: '4'},
+      {label: '物料信息', key: '5', pid: '4', url: '/audit'},
+      {label: 'BOM管理', key: '6', pid: '4', url: '/audit'},
     ],
   },
 ];
@@ -50,6 +57,7 @@ export function useMenu() {
   const tabStore = useTabStore();
   const {activeKey, tabList} = storeToRefs(tabStore);
   const expandKeys = reactive<string[]>([]);
+  const {push} = useRouter();
 
   function onExpandedUpdate(keys: string[] | string) {
     expandKeys.length = 0;
@@ -60,26 +68,30 @@ export function useMenu() {
     key: string,
     item: MenuOption,
   ) {
-    const {label, pid} = item as (MenuOption & {pid: string, label: string});
+    const {label, pid, url} = item as (MenuOption & {
+      pid: string,
+      label: string,
+      url: string
+    });
 
     tabStore.dispatch({
       type: 'ADD',
-      payload: {label: label as string, key, url: '/', pid},
+      payload: {label: label as string, key, url, pid},
     });
   }
 
-  // activeKey变化后更新菜单的展开菜单的值
+  // activeKey变化后更新菜单的展开菜单的值并跳转到对应的url
   watch(activeKey, function(value) {
     if (expandKeys[0] === value) return;
 
-    const pid = find(
+    const temp = find(
       tabList.value,
       val => val.key === value,
-    )?.pid;
-
-    if (!pid) return;
+    );
 
-    onExpandedUpdate(pid);
+    if (!temp) return;
+    onExpandedUpdate(temp.pid);
+    push(temp.url);
   });
 
   return [{activeKey, expandKeys}, {onUpdate, onExpandedUpdate}] as const;

src/pages/home/tab/index.vue

@@ -1,5 +1,4 @@
 <script setup lang='ts'>
-import {CloseSmall} from '@icon-park/vue-next';
 import {storeToRefs, useTabStore} from '@stores';
 import {NScrollbar} from 'naive-ui';
 import {useContextMenu, useTabSrotable} from './hooks';
@@ -23,16 +22,9 @@ const {onContextMenu} = useContextMenu();
           :class="['tab-item', {'tab-item-active': data.key === activeKey}]"
           @click="tabStore.setActiveKey(data.key)"
           :data-key="data.key"
-          @contextmenu=" onContextMenu"
+          @contextmenu="onContextMenu"
         >
           {{data.label}}
-          <CloseSmall
-            v-if="data.key !== '-1'"
-            theme="outline"
-            size="14"
-            class="close"
-            :fill="data.key === activeKey ? 'var(--primary-color)' : '#ccc'"
-          />
         </li>
       </ul>
     </NScrollbar>

src/pages/main/index.vue

@@ -0,0 +1,8 @@
+<script setup lang='ts'>
+defineOptions({name: 'MainPage'});
+</script>
+
+<template>
+  <main>main</main>
+</template>
+

src/routes/index.ts

@@ -6,6 +6,8 @@ import {
   HOME_PATH,
   LOGIN_NAME,
   LOGIN_PATH,
+  MAIN_NAME,
+  MAIN_PATH,
   REGISTER_NAME,
   REGISTER_PATH,
 } from './name';
@@ -17,13 +19,18 @@ const routes: RouteRecordRaw[] = [
     path: HOME_PATH,
     component: Home,
     name: HOME_NAME,
+    redirect: MAIN_PATH,
     children: [
-
       {
         path: AUDIT_PATH,
         name: AUDIT_NAME,
         component: () => import('@pages/audit/index.vue'),
       },
+      {
+        path: MAIN_PATH,
+        name: MAIN_NAME,
+        component: () => import('@pages/main/index.vue'),
+      },
     ],
   },
   {path: LOGIN_PATH, component: Login, name: LOGIN_NAME},

src/routes/name.ts

@@ -1,8 +1,14 @@
 export const RouteNameMap = new Map();
 
-/** 首页 */
+/** 主体内容 */
 export const HOME_PATH = '/';
 export const HOME_NAME = Symbol('HOME_NAME');
+RouteNameMap.set(HOME_PATH, 'MainPage');
+
+/** 主页 */
+export const MAIN_PATH = '/main';
+export const MAIN_NAME = Symbol('MAIN_NAME');
+RouteNameMap.set(MAIN_PATH, 'MainPage');
 
 /** 登录页面 */
 export const LOGIN_PATH = '/login';

src/stores/tab.ts

@@ -27,7 +27,7 @@ type Action = {
 
 const defaultTab: State['tabList'][0] = {
   key: '-1',
-  url: '/main',
+  url: '/',
   label: '首页',
   pid: '0',
 };