我

gydxnbplus/src/components/BreadCrumb.vue

@@ -1,44 +1,105 @@
 <template>
-  <nav>
-    <ol class="breadcrumb">
-      <li v-for="route in breadcrumbItems" :key="route.name">
-        <router-link :to="{ name: route.name }">{{ route.title }}</router-link>
-      </li>
-    </ol>
-  </nav>
+  <el-row type="flex" justify="space-between">
+    <el-col :span="12" class="left-col">
+      <el-icon><Expand /></el-icon>
+      <el-breadcrumb separator="/" style="margin-left: 10px; font-size: 20px;">
+        <el-breadcrumb-item :to="{ path: '/HomeV' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item v-if="breadcrumbData.length > 0">
+          <a @click="onLinkClick(breadcrumbData[1])"> {{ breadcrumbData[1].name }} </a>
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+    </el-col>
+    <el-col :span="12" style="text-align: right;">
+      <!-- 预定的其他样式 -->
+    </el-col>
+  </el-row>
 </template>
 
-<script>
-import { computed } from 'vue';
-
-const BreadCrumb = {
-  props: {
-    breadcrumbItems: {
-      type: Array,
-      required: true,
-    },
-  },
-  setup(props) {
-    const breadcrumbItems = computed(() => props.breadcrumbItems);
-    return {
-      breadcrumbItems,
-    };
-  },
+<script setup>
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+// 初始化 breadcrumbData，确保 name 和 path 有默认值
+const breadcrumbData = ref([])
+
+const replacements = {
+  'HomeV': '首页',
+  'RuleManagement': '规则',
+  'GrainDepot' : '竞价信息',
+  'VendorManagement' : '供应商管理',
+  'ExpertReview' : '专家评审',
+  'CompetitiveM':'竞价详情',
+};
+
+const getBreadcrumbData = () => {
+  breadcrumbData.value = route.matched.filter((item) => {
+    if (item.name && item.path) {
+      // 替换 name 值
+      if (replacements[item.name]) {
+        item.name = replacements[item.name];
+      }
+      return true;
+    }
+    return false;
+  });
+  if (breadcrumbData.value[1].name == '首页') {
+    breadcrumbData.value = []
+  }
 };
 
-export default BreadCrumb;
+// 监听路由变化，并立即执行
+watch(
+  route,
+  () => {
+    getBreadcrumbData();
+  },
+  {
+    immediate: true,
+  }
+);
+
+</script>
+
+<script>
+export default {
+  methods: {
+    onLinkClick(item) {
+      this.$router.push(item.name);
+    }
+  }
+}
 </script>
 
 <style scoped>
-.breadcrumb {
-  padding: 30px 16px;
-  background-color: red;
+.el-row {
+  width: 100%;
+  height: 100%;
 }
-.breadcrumb li {
-  display: inline-block;
+
+.el-breadcrumb {
+  padding: 0;
+  margin: 0;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  /* 垂直居中 */
+  justify-content: flex-start;
+  /* 左对齐 */
+}
+
+.el-breadcrumb-item {
+  display: block;
+  padding: 10px;
+  width: 50px;
+  color: #333;
 }
-.breadcrumb li + li:before {
-  content: " > ";
-  padding: 8px;
+
+.left-col {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 25px;
 }
 </style>