fix: fix abnormal breadcrumb status

vben
1 parent f75425d1
Showing 1 changed file with 16 additions and 26 deletions
src/layouts/default/LayoutBreadcrumb.tsx
@@ -10,20 +10,23 @@ import { PageEnum } from &#39;/@/enums/pageEnum&#39;;
 import { isBoolean } from '/@/utils/is';
  
 import { compile } from 'path-to-regexp';
-import Icon from '/@/components/Icon';
  
 export default defineComponent({
   name: 'BasicBreadcrumb',
-  props: {
-    showIcon: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
+  setup() {
     const itemList = ref<AppRouteRecordRaw[]>([]);
+
     const { currentRoute, push } = useRouter();
  
+    watch(
+      () => currentRoute.value,
+      () => {
+        if (unref(currentRoute).name === 'Redirect') return;
+        getBreadcrumb();
+      },
+      { immediate: true }
+    );
+
     function getBreadcrumb() {
       const { matched } = unref(currentRoute);
       const matchedList = matched.filter((item) => item.meta && item.meta.title).slice(1);
@@ -63,36 +66,23 @@ export default defineComponent({
       return push(pathCompile(path));
     }
  
-    watch(
-      () => currentRoute.value,
-      () => {
-        if (unref(currentRoute).name === 'Redirect') return;
-        getBreadcrumb();
-      },
-      { immediate: true }
-    );
-
     return () => (
       <Breadcrumb class="layout-breadcrumb">
         {() => (
           <TransitionGroup name="breadcrumb">
             {() => {
               return unref(itemList).map((item) => {
-                const isLink = !!item.redirect && !item.meta.disabledRedirect;
+                const isLink =
+                  (!!item.redirect && !item.meta.disabledRedirect) ||
+                  !item.children ||
+                  item.children.length === 0;
                 return (
                   <BreadcrumbItem
                     key={item.path}
                     isLink={isLink}
                     onClick={handleItemClick.bind(null, item)}
                   >
-                    {() => (
-                      <>
-                        {props.showIcon && item.meta.icon && item.meta.icon.trim() !== '' && (
-                          <Icon icon={item.meta.icon} class="icon mr-1 mb-1" />
-                        )}
-                        {item.meta.title}
-                      </>
-                    )}
+                    {() => item.meta.title}
                   </BreadcrumbItem>
                 );
               });