refactor: 路由名称与组件名称保持一致，解决keepAlive问题

src/router/elegant/helper.ts

@@ -0,0 +1,49 @@
+/* eslint-disable no-console */
+/** 后台返回的路由动态生成name 解决缓存问题 感谢 @fourteendp 详见 https://github.com/vbenjs/vue-vben-admin/issues/3927 */
+import type { Component } from 'vue';
+import { defineComponent, h } from 'vue';
+
+interface Options {
+  name?: string;
+}
+
+export type RouteComponentLoader = () => Promise<any>;
+
+/**
+ * 作用相当于给组件包了一层 & 设置name 解决keepAlive问题
+ *
+ * @param loader 导入的路由
+ * @param options options
+ * @returns components
+ */
+export function createCustomNameComponent(
+  loader: RouteComponentLoader,
+  options: Options = {}
+): () => Promise<Component> {
+  const { name } = options;
+  let component: Component | null = null;
+
+  const load = async () => {
+    try {
+      const { default: loadedComponent } = await loader();
+      component = loadedComponent;
+    } catch (error) {
+      console.error(`Cannot resolve component ${name}, error:`, error);
+    }
+  };
+
+  return async () => {
+    if (!component) {
+      await load();
+    }
+
+    return Promise.resolve(
+      defineComponent({
+        name,
+        render() {
+          return h(component as Component);
+        }
+      })
+    );
+  };
+}

src/router/elegant/transform.ts

@@ -6,6 +6,7 @@
 import type { RouteRecordRaw, RouteComponent } from 'vue-router';
 import type { ElegantConstRoute } from '@elegant-router/vue';
 import type { RouteMap, RouteKey, RoutePath } from '@elegant-router/types';
+import { createCustomNameComponent, RouteComponentLoader } from './helper';
 
 /**
  * transform elegant const routes to vue routes
@@ -125,8 +126,11 @@ function transformElegantRouteToVueRoute(
 
       if (isView(component)) {
         const viewName = getViewName(component);
-
-        vueRoute.component = views[viewName];
+        // 给组件设置name 与route.name一致
+        vueRoute.component = createCustomNameComponent(views[viewName] as RouteComponentLoader,
+          { name: route.name });
+        // 路由名称与组件名称保持一致，解决keepAlive问题
+        vueRoute.name = route.name;
       }
 
     }

src/store/modules/route/index.ts

@@ -113,8 +113,8 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
 
       // @ts-expect-error no hidden field
       route.meta.hideInMenu = Boolean(route.hidden) || false;
-
-      route.meta.keepAlive = Boolean(route.meta.noCache) || false;
+      // 是否需要keepAlive
+      route.meta.keepAlive = !route.meta.noCache || false;
 
       if (route.component !== 'layout.base') {
         route.component = parent ? `view.${route.component}` : `layout.base$view.${route.component}`;