From 43d29b8b6677fc6239f5265bcea47242d118fb2d Mon Sep 17 00:00:00 2001
From: riverflow <3011499946@qq.com>
Date: Mon, 11 Aug 2025 17:44:03 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=9C=A8=E8=B7=AF=E7=94=B1=E4=B8=AD?=
 =?UTF-8?q?=E4=B8=BA=E6=AF=8F=E4=B8=AA=E8=8F=9C=E5=8D=95=E9=80=89=E9=A1=B9?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0title?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 order-system/src/router/index.ts | 35 +++++++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/order-system/src/router/index.ts b/order-system/src/router/index.ts
index 6804634..9e1e91f 100644
--- a/order-system/src/router/index.ts
+++ b/order-system/src/router/index.ts
@@ -24,37 +24,58 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: '/dashboard',
         name: 'dashboard',
-        component: () => import('@/views/dashboard/Index.vue')
+        component: () => import('@/views/dashboard/Index.vue'),
+        meta: {
+          title: '首页'
+        },
       },
       {
         path: '/banner',
         name: 'banner',
-        component: () => import('@/views/banner/Index.vue')
+        component: () => import('@/views/banner/Index.vue'),
+        meta: {
+          title: '广告管理'
+        },
       },
       {
         path: '/category',
         name: 'category',
-        component: () => import('@/views/category/Index.vue')
+        component: () => import('@/views/category/Index.vue'),
+        meta: {
+          title: '菜品分类'
+        },
       },
       {
         path: '/comment',
         name: 'comment',
-        component: () => import('@/views/comment/Index.vue')
+        component: () => import('@/views/comment/Index.vue'),
+        meta: {
+          title: '评论管理'
+        },
       },
       {
         path: '/goods',
         name: 'goods',
-        component: () => import('@/views/goods/Index.vue')
+        component: () => import('@/views/goods/Index.vue'),
+        meta: {
+          title: '菜品管理'
+        },
       },
       {
         path: '/order',
         name: 'order',
-        component: () => import('@/views/order/Index.vue')
+        component: () => import('@/views/order/Index.vue'),
+        meta: {
+          title: '订单管理'
+        },
       },
       {
         path: '/user',
         name: 'user',
-        component: () => import('@/views/user/Index.vue')
+        component: () => import('@/views/user/Index.vue'),
+        meta: {
+          title: '用户管理'
+        },
       },
     ]
   }

From 3e678c1fb3da1baa40eda660037935ddc7d88041 Mon Sep 17 00:00:00 2001
From: riverflow <3011499946@qq.com>
Date: Mon, 11 Aug 2025 18:29:36 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=9C=A8layout.header=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E5=A4=B9=E4=B8=AD=E5=88=9B=E5=BB=BABreadCrumb.vue=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=20=E9=80=9A=E8=BF=87Element-plus=E5=AF=BC=E5=85=A5?=
 =?UTF-8?q?=E9=9D=A2=E5=8C=85=E5=B1=91=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在BreadCrumb.vue文件中引入当前路由，实现路由地址控制面包屑导航
使用watch监听路由path
当path发生变化时，调用getBrandCrumb函数

点击的第一条数据不是首页时，需要构造首页路径
在getBrandCrumb函数中添加if判断

onMounted函数实现当组件首次加载时，根据当前路由路径生成面包屑导航
---
 order-system/src/layout/header/BreadCrumb.vue | 64 +++++++++++++++++++
 order-system/src/layout/header/Header.vue     |  7 ++
 2 files changed, 71 insertions(+)
 create mode 100644 order-system/src/layout/header/BreadCrumb.vue

diff --git a/order-system/src/layout/header/BreadCrumb.vue b/order-system/src/layout/header/BreadCrumb.vue
new file mode 100644
index 0000000..8558942
--- /dev/null
+++ b/order-system/src/layout/header/BreadCrumb.vue
@@ -0,0 +1,64 @@
+<template>
+  <el-breadcrumb class="bread" separator="/">
+    <!-- 注释掉不需要的部分 -->
+    <!-- <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
+    <el-breadcrumb-item>
+      <a href="/">promotion management</a>
+    </el-breadcrumb-item> -->
+
+    <!-- <el-breadcrumb-item>首页</el-breadcrumb-item>
+    <el-breadcrumb-item>用户管理</el-breadcrumb-item> -->
+
+    <!-- 通过for循环实现点击后改变 -->
+    <el-breadcrumb-item v-for="item in tabs">{{ item.meta.title }}</el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script setup lang="ts">
+
+  import { onMounted, ref, Ref, watch } from 'vue';
+
+  // 引入当前路由，实现通过路由地址控制面包屑导航
+  import { useRoute, RouteLocationMatched } from 'vue-router'
+
+  // 获取当前路由
+  const route = useRoute()
+
+  // 定义面包屑导航数据
+  const tabs: Ref<RouteLocationMatched[]> = ref([])
+
+  // 监听当前路由
+  watch(
+    // 监听到路由path发生变化时，调用函数
+    ()=>route.path,
+    ()=>getBreadCrumb()
+  )
+
+  // 获取面包屑导航数据
+  const getBreadCrumb = ()=>{
+
+    // 过滤出有title的数据
+    let matched = route.matched.filter((item)=>item.meta && item.meta.title)
+
+    const first = matched[0]
+
+    // 点击的第一条数据不是首页时，需要构造首页路径
+    if(first.path !== '/dashboard'){
+      matched = [{path:'/dashboard', meta:{title: '首页'}} as any].concat(matched)
+    }
+
+    tabs.value = matched
+  }
+
+  // 当组件首次加载时，根据当前路由路径生成面包屑导航
+  onMounted(()=>{
+    getBreadCrumb()
+  })
+</script>
+
+<style scoped>
+  /* 为面包屑导航栏添加样式 */
+  .bread {
+    margin-left: 20px;
+  }
+</style>
\ No newline at end of file
diff --git a/order-system/src/layout/header/Header.vue b/order-system/src/layout/header/Header.vue
index 0a4c281..b449ec6 100644
--- a/order-system/src/layout/header/Header.vue
+++ b/order-system/src/layout/header/Header.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="left-header">
+    <!-- 使用收缩组件 -->
     <collapse></collapse>
+
+    <!-- 使用面包屑导航 -->
+    <BreadCrumb></BreadCrumb>
   </div>
 
   <LoginOut></LoginOut>
@@ -10,6 +14,9 @@
   // 引入另外两个组件
   import Collapse from './Collapse.vue';
   import LoginOut from './LoginOut.vue';
+
+  // 引入面包屑导航
+  import BreadCrumb from './BreadCrumb.vue';
 </script>
 
 <style scoped lang="scss">