fix: single breadcrumb item display separator

src/layouts/default/header/components/Breadcrumb.vue

@@ -1,17 +1,18 @@
 <template>
   <a-breadcrumb class="!ml-2">
     <a-breadcrumb-item v-for="(item,index) in routes" :key="index">
-      {{ item.meta.title }}
+      {{ item.name && item.meta.title }}
     </a-breadcrumb-item>
   </a-breadcrumb>
 </template>
 
 <script setup lang="ts">
+import type { RouteLocationMatched } from 'vue-router'
+
 const route = useRoute()
-const router = useRouter()
-const routes = ref(route.matched)
+const routes = ref<RouteLocationMatched[]>([])
 
-router.afterEach((to) => {
-  routes.value = to.matched
+watchEffect(() => {
+  routes.value = route.matched.filter(item => !item.meta?.hideBreadcrumb)
 })
 </script>

src/router/routes/modules/about.ts

@@ -8,15 +8,19 @@ const route: RouteRecordRaw = {
   component: DefaultLayout,
   redirect: '/about',
   meta: {
-    title: '关于',
     icon: SettingOutlined,
     single: true,
-    sort: 4
+    title: '关于',
+    sort: 4,
+    hideBreadcrumb: true
   },
   children: [
     {
       path: '',
       name: 'about-page',
+      meta: {
+        title: '关于'
+      },
       component: () => import('~/views/about/index.vue')
     }
   ]

src/router/routes/plugins/dynamicRoutes.ts

@@ -4,7 +4,7 @@ import { useRouteStore } from '~/stores'
 type RouteModule = GetArrayItemType<RouteModuleList>
 
 function sortBySortKey(routerModuleList: RouteModuleList | RouteModule['children']) {
-  return routerModuleList!.sort((a: RouteModule, b: RouteModule) => a.meta!.sort - b.meta!.sort)
+  return routerModuleList!.sort((a: RouteModule, b: RouteModule) => (a.meta?.sort || Number.MAX_VALUE) - (b.meta?.sort || Number.MAX_VALUE))
 }
 
 function sortRoutesBySortKey(routerModuleList: RouteModuleList) {

types/routes.d.ts

@@ -6,13 +6,15 @@ declare module 'vue-router' {
     // 标题
     title: string
     // 排序索引
-    sort: number
+    sort?: number
     // 是否隐藏菜单
     isHide?: boolean
     // icon，目前仅支持引入 antdv 中的 icon 组件
     icon?: FunctionalComponent
     // 是否是单独的菜单
     single?: boolean
+    // 是否隐藏面包屑
+    hideBreadcrumb?: boolean
     // 路由携带参数
     routeParams?: RouteLocationNormalized['params']
     routeQuery?: RouteLocationNormalized['query']