修改面包屑组件

src/components/Breadcrumb copy.vue

@@ -0,0 +1,77 @@
+<template>
+    <el-breadcrumb v-if="showBreadcrumb" separator="/">
+      <el-breadcrumb-item
+        v-for="(item, index) in breadcrumbList"
+        :key="index"
+      >
+        <i v-if="item.icon" :class="item.icon"></i>
+        <span>{{ item.title }}</span>
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+      return {
+        breadcrumbList: [],
+        showBreadcrumb: false // 控制是否显示面包屑导航
+      };
+    },
+    watch: {
+      $route() {
+        this.updateBreadcrumb();
+      }
+    },
+    mounted() {
+      this.updateBreadcrumb();
+    },
+    methods: {
+      updateBreadcrumb() {
+        const currentPath = this.$route.path;
+        // 判断是否为子页面
+        if(!this.$parent.menuData)return
+        const isSubPage = this.isSubPage(currentPath);
+        this.showBreadcrumb = isSubPage;
+  
+        if (isSubPage) {
+          this.breadcrumbList = this.getBreadcrumbList(currentPath);
+        } else {
+          this.breadcrumbList = [];
+        }
+      },
+      isSubPage(path) {
+        console.log(this.$parent.menuData,'this.$parent.menuData==');
+        // 判断当前路径是否为子页面
+        for (const menu of this.$parent.menuData) {
+          for (const subMenu of menu.children) {
+            if (subMenu.path === path) {
+              return true;
+            }
+          }
+        }
+        return false;
+      },
+      getBreadcrumbList(path) {
+        const breadcrumbList = [];
+        // 遍历菜单数据，查找匹配的面包屑路径
+        for (const menu of this.$parent.menuData) {
+          for (const subMenu of menu.children) {
+            if (subMenu.path === path) {
+              breadcrumbList.push({ title: menu.title, icon: menu.icon });
+              breadcrumbList.push({ title: subMenu.title });
+              break;
+            }
+          }
+        }
+        return breadcrumbList;
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .el-breadcrumb {
+    margin-bottom: 20px;
+  }
+  </style>

src/components/Breadcrumb.vue

@@ -1,77 +1,101 @@
 <template>
-    <el-breadcrumb v-if="showBreadcrumb" separator="/">
+  <div v-if="breadcrumbs.length > 0" class="breadcrumb-container">
-      <el-breadcrumb-item
+    <nav>
-        v-for="(item, index) in breadcrumbList"
+      <ol class="breadcrumb">
+        <li
+          v-for="(item, index) in breadcrumbs"
           :key="index"
+          class="breadcrumb-item"
+          :class="{ active: index === breadcrumbs.length - 1 }"
         >
-        <i v-if="item.icon" :class="item.icon"></i>
+          <template v-if="index !== breadcrumbs.length - 1">
+            <router-link :to="item.path">{{ item.title }}</router-link>
+            <!-- <span class="separator">/</span> -->
+            <img class="separator" src="@/assets/separator.png" alt="">
+          </template>
+          <template v-else>
             <span>{{ item.title }}</span>
-      </el-breadcrumb-item>
+          </template>
-    </el-breadcrumb>
+        </li>
+      </ol>
+    </nav>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
+  name: 'Breadcrumb',
-      return {
+  computed: {
-        breadcrumbList: [],
+    breadcrumbs() {
-        showBreadcrumb: false // 控制是否显示面包屑导航
+      if (this.$route.meta.hideBreadcrumb) return []
-      };
+
-    },
+      const crumbs = []
-    watch: {
+      let currentRoute = this.$route
-      $route() {
+
-        this.updateBreadcrumb();
+      // 递归查找所有父级路由
-      }
+      while (currentRoute) {
-    },
+        crumbs.unshift({
-    mounted() {
+          path: currentRoute.path,
-      this.updateBreadcrumb();
+          title: this.getTitle(currentRoute)
-    },
+        })
-    methods: {
-      updateBreadcrumb() {
-        const currentPath = this.$route.path;
-        // 判断是否为子页面
-        if(!this.$parent.menuData)return
-        const isSubPage = this.isSubPage(currentPath);
-        this.showBreadcrumb = isSubPage;
 
-        if (isSubPage) {
+        // 通过 meta.breadcrumbParent 查找父级路由
-          this.breadcrumbList = this.getBreadcrumbList(currentPath);
+        if (currentRoute.meta.breadcrumbParent) {
+          currentRoute = this.$router.options.routes.find(
+            r => r.name === currentRoute.meta.breadcrumbParent
+          )
         } else {
-          this.breadcrumbList = [];
+          currentRoute = null
+        }
+      }
+
+      return crumbs
     }
   },
-      isSubPage(path) {
+  methods: {
-        console.log(this.$parent.menuData,'this.$parent.menuData==');
+    getTitle(route) {
-        // 判断当前路径是否为子页面
+      return typeof route.meta.title === 'function'
-        for (const menu of this.$parent.menuData) {
+        ? route.meta.title(route)
-          for (const subMenu of menu.children) {
+        : route.meta.title || route.name
-            if (subMenu.path === path) {
-              return true;
     }
   }
 }
-        return false;
+</script>
-      },
+<style scoped>
-      getBreadcrumbList(path) {
+/* 保持之前的样式不变 */
-        const breadcrumbList = [];
+.breadcrumb-container {
-        // 遍历菜单数据，查找匹配的面包屑路径
+  padding: 16px 12px;
-        for (const menu of this.$parent.menuData) {
+  background-color: #f5f5f5;
-          for (const subMenu of menu.children) {
+  border-radius: 4px;
-            if (subMenu.path === path) {
-              breadcrumbList.push({ title: menu.title, icon: menu.icon });
-              breadcrumbList.push({ title: subMenu.title });
-              break;
 }
+
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }
+
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
 }
-        return breadcrumbList;
+
+.breadcrumb-item a {
+  color: #626573;
+  text-decoration: none;
 }
+
+.breadcrumb-item.active span {
+  color: #1E2226;;
+
 }
-  };
-  </script>
 
-  <style scoped>
+.separator {
-  .el-breadcrumb {
+  /* margin: 0 5px;
-    margin-bottom: 20px;
+  color: #6c757d;; */
+  width: 12px;
+  height: 12px;
 }
 </style>

src/router/index.js

@@ -30,27 +30,17 @@ const routes = [{
     path: '/',
     name: '首页',
     component: HomeView,
-    // component: Franchise
+    meta: { 
+      title: '首页',
+      hideBreadcrumb: true // 首页不显示面包屑
+    }
   },
   {
     path: '/register',
     name: 'register',
-    // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import( /* webpackChunkName: "register" */ '../views/Register.vue'),
-    children: [ // 这是子路由的定义开始
-      // {
-      //   path: '', // 当访问 /user 时，默认加载 UserProfile 组件
-      //   name: 'register',
-      //   component: Register
-      // },
-      // {
-      //   path: 'posts', // 当访问 /user/posts 时，加载 UserPosts 组件
-      //   name: 'UserPosts',
-      //   component: UserPosts,
-      // }
-    ]
   },
   {
     path: '/ui',
@@ -68,22 +58,22 @@ const routes = [{
     // which is lazy-loaded when the route is visited.
     component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteList.vue')
   },
-  {
+  // {
-    path: '/agent/siteBaseSetting',
+  //   path: '/agent/siteBaseSetting',
-    name: '站点基本设置',
+  //   name: '站点基本设置',
-    // route level code-splitting
+  //   // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
+  //   // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
+  //   // which is lazy-loaded when the route is visited.
-    component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteBaseSetting.vue')
+  //   component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteBaseSetting.vue')
-  },
+  // },
-  {
+  // {
-    path: '/agent/siteSemSetting',
+  //   path: '/agent/siteSemSetting',
-    name: '营销推广',
+  //   name: '营销推广',
-    // route level code-splitting
+  //   // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
+  //   // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
+  //   // which is lazy-loaded when the route is visited.
-    component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteSemSetting.vue')
+  //   component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteSemSetting.vue')
-  },
+  // },
   {
     path: '/franchise',
     name: '加盟',