🔨 自定义标签名称.

orion-visor-ui/src/router/constants.ts

@@ -1,6 +1,3 @@
-import type { RouteLocationNormalized } from 'vue-router';
-import type { TagProps } from '@/store/modules/tab-bar/types';
-
 export const LOGIN_ROUTE_NAME = 'login';
 
 export const REDIRECT_ROUTE_NAME = 'redirect';
@@ -36,18 +33,3 @@ export const STATUS_ROUTER_LIST = [
   { name: NOT_FOUND_ROUTER_NAME, children: [] },
   { name: FORBIDDEN_ROUTER_NAME, children: [] },
 ];
-
-/**
- * router 转 tag
- */
-export const routerToTag = (route: RouteLocationNormalized): TagProps => {
-  const { name, meta, path, fullPath, query } = route;
-  return {
-    title: meta.locale || String(name),
-    name: String(name),
-    path,
-    fullPath,
-    query,
-    ignoreCache: meta.ignoreCache,
-  };
-};

orion-visor-ui/src/router/guard/router-permission.ts

@@ -1,5 +1,6 @@
 import type { Router } from 'vue-router';
 import { useMenuStore } from '@/store';
+import { getRouteTitle } from '@/router';
 import { NOT_FOUND_ROUTER_NAME, WHITE_ROUTER_LIST } from '../constants';
 import NProgress from 'nprogress';
 import usePermission from '@/hooks/permission';
@@ -30,10 +31,7 @@ export default function setupPermissionGuard(router: Router) {
       next({ name: NOT_FOUND_ROUTER_NAME });
     }
     // 修改页面标题
-    const locale = to.meta?.locale;
-    if (locale) {
-      document.title = locale;
-    }
+    document.title = getRouteTitle(to);
     NProgress.done();
   });
 }

orion-visor-ui/src/router/index.ts

@@ -1,4 +1,5 @@
-import type { RouteLocationRaw } from 'vue-router';
+import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router';
+import type { TagProps } from '@/store/modules/tab-bar/types';
 import { createRouter, createWebHistory } from 'vue-router';
 import { appRoutes } from './routes';
 import { openWindow } from '@/utils';
@@ -37,4 +38,27 @@ export const openNewRoute = (route: RouteLocationRaw) => {
   }
 };
 
+// route 转 tag
+export const getRouteTag = (route: RouteLocationNormalized): TagProps => {
+  const { name, meta, path, fullPath, query } = route;
+  return {
+    title: getRouteTitle(route),
+    name: String(name),
+    path,
+    fullPath,
+    query,
+    ignoreCache: meta.ignoreCache,
+  };
+};
+
+// 获取 router title
+export const getRouteTitle = (route: RouteLocationNormalized) => {
+  const { meta } = route;
+  // 如果 meta.localeTemplate 则根据路由生成
+  if (meta.localeTemplate) {
+    return meta?.localeTemplate(route) || meta.locale || '';
+  }
+  return meta.locale || '';
+};
+
 export default router;

orion-visor-ui/src/router/typings.d.ts

@@ -1,3 +1,4 @@
+import type { RouteLocationNormalized } from 'vue-router';
 import 'vue-router';
 
 /**
@@ -21,5 +22,7 @@ declare module 'vue-router' {
     newWindow?: boolean;
     // 是否活跃
     activeMenu?: string;
+    // 名称模板
+    localeTemplate?: (key: RouteLocationNormalized) => string;
   }
 }