Merge pull request '完成头部区域面包屑导航栏的制作' (#19) from Brunch_LPQ into main

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

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: '用户管理'
+        },
       },
     ]
   }