fix: breadcrumb i18n

src/api/model/permissionModel.ts

@@ -1,5 +1,7 @@
 import { defineComponent } from 'vue';
 
+import { RouteMeta } from '@/types/interface';
+
 export interface MenuListResult {
   list: Array<RouteItem>;
 }
@@ -18,15 +20,3 @@ export interface RouteItem {
   meta: RouteMeta;
   children?: Array<RouteItem>;
 }
-export interface RouteMeta {
-  title: string;
-  icon?: string;
-  expanded?: boolean;
-  orderNo?: number;
-  hidden?: boolean;
-  hiddenBreadcrumb?: boolean;
-  single?: boolean;
-  keepAlive?: boolean;
-  frameSrc?: string;
-  frameBlank?: boolean;
-}

src/layouts/components/Breadcrumb.vue

@@ -10,6 +10,11 @@
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 
+import { useLocale } from '@/locales/useLocale';
+import { RouteMeta } from '@/types/interface';
+
+const { locale } = useLocale();
+
 const crumbs = computed(() => {
   const route = useRoute();
 
@@ -18,14 +23,22 @@ const crumbs = computed(() => {
 
   const breadcrumbs = pathArray.reduce((breadcrumbArray, path, idx) => {
     // 如果路由下有hiddenBreadcrumb或当前遍历到参数则隐藏
-    if (route.matched[idx]?.meta?.hiddenBreadcrumb || Object.values(route.params).includes(path)) {
+    const meta = route.matched[idx]?.meta as RouteMeta;
+    if (meta?.hiddenBreadcrumb || Object.values(route.params).includes(path)) {
       return breadcrumbArray;
     }
-
+    let title = path;
+    if (meta?.title) {
+      if (typeof meta.title === 'string') {
+        title = meta.title;
+      } else {
+        title = meta.title[locale.value];
+      }
+    }
     breadcrumbArray.push({
       path,
       to: breadcrumbArray[idx - 1] ? `/${breadcrumbArray[idx - 1].path}/${path}` : `/${path}`,
-      title: route.matched[idx]?.meta?.title ?? path,
+      title,
     });
     return breadcrumbArray;
   }, []);

src/types/interface.d.ts

@@ -3,9 +3,22 @@ import { LocationQueryRaw, RouteRecordName } from 'vue-router';
 
 import STYLE_CONFIG from '@/config/style';
 
+export interface RouteMeta {
+  title?: string | Record<string, string>;
+  icon?: string;
+  expanded?: boolean;
+  orderNo?: number;
+  hidden?: boolean;
+  hiddenBreadcrumb?: boolean;
+  single?: boolean;
+  keepAlive?: boolean;
+  frameSrc?: string;
+  frameBlank?: boolean;
+}
+
 export interface MenuRoute {
   path: string;
-  title?: string;
+  title?: string | Record<string, string>;
   name?: string;
   icon?:
     | string
@@ -14,7 +27,7 @@ export interface MenuRoute {
       };
   redirect?: string;
   children: MenuRoute[];
-  meta: any;
+  meta: RouteMeta;
 }
 
 export type ModeType = 'dark' | 'light';

src/utils/route/index.ts

@@ -1,7 +1,8 @@
 import cloneDeep from 'lodash/cloneDeep';
 import { shallowRef } from 'vue';
 
-import { RouteItem, RouteMeta } from '@/api/model/permissionModel';
+import { RouteItem } from '@/api/model/permissionModel';
+import { RouteMeta } from '@/types/interface';
 import {
   BLANK_LAYOUT,
   EXCEPTION_COMPONENT,