diff --git a/src/api/model/permissionModel.ts b/src/api/model/permissionModel.ts index 2c6ed58..dad83b9 100644 --- a/src/api/model/permissionModel.ts +++ b/src/api/model/permissionModel.ts @@ -1,5 +1,7 @@ import { defineComponent } from 'vue'; +import { RouteMeta } from '@/types/interface'; + export interface MenuListResult { list: Array; } @@ -18,15 +20,3 @@ export interface RouteItem { meta: RouteMeta; children?: Array; } -export interface RouteMeta { - title: string; - icon?: string; - expanded?: boolean; - orderNo?: number; - hidden?: boolean; - hiddenBreadcrumb?: boolean; - single?: boolean; - keepAlive?: boolean; - frameSrc?: string; - frameBlank?: boolean; -} diff --git a/src/layouts/components/Breadcrumb.vue b/src/layouts/components/Breadcrumb.vue index 74ce022..2c48f79 100644 --- a/src/layouts/components/Breadcrumb.vue +++ b/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; }, []); diff --git a/src/types/interface.d.ts b/src/types/interface.d.ts index ab8ac76..ef782ff 100644 --- a/src/types/interface.d.ts +++ b/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; + 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; name?: string; icon?: | string @@ -14,7 +27,7 @@ export interface MenuRoute { }; redirect?: string; children: MenuRoute[]; - meta: any; + meta: RouteMeta; } export type ModeType = 'dark' | 'light'; diff --git a/src/utils/route/index.ts b/src/utils/route/index.ts index ae2fdf7..693c662 100644 --- a/src/utils/route/index.ts +++ b/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,