添加面包屑

src/layouts/components/AppMain/index.vue

@@ -25,10 +25,11 @@ const route = computed(() => {
 @import "@/styles/variables.module.scss";
 
 .app-main {
-  min-height: calc(100vh - #{$navBarHeight});
+  min-height: calc(100vh - #{$navBarHeight+$BreadcrumbHeight});
   width: 100%;
   position: relative;
   overflow: hidden;
+  background-color: #{$appMainBgColor};
 }
 .fixed-header + .app-main {
   padding-top: 50px;

src/layouts/components/Breadcrumb/Breadcrumb.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
+      <span
+        v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
+        class="no-redirect"
+        >{{ item.meta.title }}</span>
+      <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script setup>
+// import { compile } from "path-to-regexp";
+import { reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const levelList = ref(null);
+const router = useRouter();
+// 当前路由
+const route = useRoute();
+
+// 解析路由匹配的数组
+const getBreadcrumb = () => {
+  // 过滤留下只有meta和title
+  let matched = route.matched.filter((item) => item.meta && item.meta.title);
+
+  // 拼出最终需要展示的跳转数据
+  levelList.value = matched.filter(
+    (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
+  );
+};
+// 手动解析path中可能存在的参数
+const pathCompile = (path) => {
+  // var toPath = compile(path);
+  console.log(path)
+  var toPath = path;
+  return toPath(route.params);
+};
+// 跳转连接处理
+const handleLink = (item) => {
+  const { redirect, path } = item;
+  if (redirect) {
+    router.push(redirect);
+    return;
+  }
+  router.push(pathCompile(path));
+};
+
+// 首次调用
+getBreadcrumb();
+// 监控route的变化，避免组件复用信息同步问题
+watch(route, getBreadcrumb);
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/variables.module.scss";
+.app-breadcrumb.el-breadcrumb {
+  // display: inline-block;
+  // font-size: 14px;
+  line-height: #{$BreadcrumbHeight};
+  // margin-left: 8px;
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>

src/layouts/components/Sidebar/SidebarItem.vue

@@ -74,15 +74,11 @@ const hasOneShowingChild = (children = [], parent) => {
 }
 const resolvePath = (routePath) => {
   if (isExternal(routePath)) {
-    console.log('这里？？？')
     return routePath
   }
   if (isExternal(props.basePath)) {
-        console.log('这里？？？')
-
     return props.basePath
   }
-  console.log(`${props.basePath}/${routePath}`)
   return `${props.basePath}/${routePath}`
 }
 

src/layouts/index.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="app-wrapper">
+    <NavBart />
     <Sidebar class="sidebar-container" />
     <div class="main-container">
-      <NavBart />
+      <div class="main-container-breadcrumb">
+        <Breadcrumb />
+      </div>
       <AppMain />
     </div>
   </div>
@@ -12,45 +15,11 @@
 import AppMain from "./components/AppMain/index.vue";
 import NavBart from "./components/Navbart/index.vue";
 import Sidebar from "./components/Sidebar/index.vue";
+import Breadcrumb from "./components/Breadcrumb/Breadcrumb.vue";
+import '@/styles/variables.module.scss'
 </script>
 
 <style lang="scss" scoped>
 @import "@/styles/mixin.scss";
 @import "@/styles/variables.module.scss";
-.app-wrapper {
-  @include clearfix;
-  position: relative;
-  height: 100%;
-  width: 100%;
-  &.mobile.openSidebar {
-    position: fixed;
-    top: 0;
-  }
-}
-.drawer-bg {
-  background: #000;
-  opacity: 0.3;
-  width: 100%;
-  top: 0;
-  height: 100%;
-  position: absolute;
-  z-index: 999;
-}
-
-.fixed-header {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 9;
-  width: calc(100% - #{$sideBarWidth});
-  transition: width 0.28s;
-}
-
-.hideSidebar .fixed-header {
-  width: calc(100% - 54px);
-}
-
-.mobile .fixed-header {
-  width: 100%;
-}
 </style>

src/styles/sidebar.scss

@@ -6,6 +6,11 @@
     transition: margin-left .28s;
     margin-left: #{$sideBarWidth};
     position: relative;
+
+    .main-container-breadcrumb{
+      width: 100%;
+      height: #{$BreadcrumbHeight};
+    }
   }
 
   .sidebar-container {

src/styles/variables.module.scss

@@ -2,15 +2,18 @@
 $menuText:#909399; //文字颜色
 $menuActiveText:#409EFF; //选中的文字颜色
 $subMenuActiveText:#409EFF; //选中的文字父元素颜色
-$menuBg:#ffffff;// 背景颜色
-$menuHover:#f3f3f3;// 焦点背景色
-$subMenuBg:#ffffff;//子元素的背景颜色
-$subMenuHover:#f3f3f3;//子元素焦点背景色
+$menuBg:#ffffff; // 背景颜色
+$menuHover:#f3f3f3; // 焦点背景色
+$subMenuBg:#ffffff; //子元素的背景颜色
+$subMenuHover:#f3f3f3; //子元素焦点背景色
 
 $sideBarWidth: 210px;
-
 $navBarHeight: 54px;
 
+$appMainBgColor: #f5f6fa; //app-mian背景颜色
+
+$BreadcrumbHeight:50px; //面包屑高度
+
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {