fix(breadcrumb): ensure the breadcrumbs display the icon correctly, fix #433

CHANGELOG.zh_CN.md

@@ -8,6 +8,10 @@
 
 - 移除 useFullScreen 函数
 
+### 🐛 Bug Fixes
+
+- 确保面包屑正确的显示图标
+
 ## 2.1.1 (2021-03-26)
 
 ### ✨ Features

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

@@ -2,7 +2,7 @@
   <div :class="[prefixCls, `${prefixCls}--${theme}`]">
     <a-breadcrumb :routes="routes">
       <template #itemRender="{ route, routes, paths }">
-        <Icon :icon="route.meta.icon" v-if="getShowBreadCrumbIcon && route.meta.icon" />
+        <Icon :icon="getIcon(route)" v-if="getShowBreadCrumbIcon && getIcon(route)" />
         <span v-if="!hasRedirect(routes, route)">
           {{ t(route.name || route.meta.title) }}
         </span>
@@ -146,7 +146,11 @@
         return true;
       }
 
-      return { routes, t, prefixCls, getShowBreadCrumbIcon, handleClick, hasRedirect };
+      function getIcon(route) {
+        return route.icon || route.meta?.icon;
+      }
+
+      return { routes, t, prefixCls, getIcon, getShowBreadCrumbIcon, handleClick, hasRedirect };
     },
   });
 </script>