在layout.header文件夹中创建BreadCrumb.vue文件

通过Element-plus导入面包屑导航

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

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

onMounted函数实现当组件首次加载时，根据当前路由路径生成面包屑导航

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>

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">