菜单面包屑导航支持多层级显示

src/components/Breadcrumb/index.vue

@@ -1,7 +1,7 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+      <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>
@@ -10,21 +10,51 @@
 </template>
 
 <script setup>
-const route = useRoute();
-const router = useRouter();
+import usePermissionStore from '@/store/modules/permission'
+
+const route = useRoute()
+const router = useRouter()
+const permissionStore = usePermissionStore()
 const levelList = ref([])
 
 function getBreadcrumb() {
   // only show routes with meta.title
-  let matched = route.matched.filter(item => item.meta && item.meta.title);
-  const first = matched[0]
+  let matched = []
+  const pathNum = findPathNum(route.path)
+  // multi-level menu
+  if (pathNum > 2) {
+    const reg = /\/\w+/gi
+    const pathList = route.path.match(reg).map((item, index) => {
+      if (index !== 0) item = item.slice(1)
+      return item
+    })
+    getMatched(pathList, permissionStore.sidebarRouters, matched)
+  } else {
+    matched = route.matched.filter((item) => item.meta && item.meta.title)
+  }
   // 判断是否为首页
-  if (!isDashboard(first)) {
-    matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched)
+  if (!isDashboard(matched[0])) {
+    matched = [{ path: "/index", meta: { title: "首页" } }].concat(matched)
   }
-
   levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
 }
+function findPathNum(str, char = "/") {
+  let index = str.indexOf(char)
+  let num = 0
+  while (index !== -1) {
+    num++
+    index = str.indexOf(char, index + 1)
+  }
+  return num
+}
+function getMatched(pathList, routeList, matched) {
+  let data = routeList.find((item) => item.path == pathList[0])
+  matched.push(data)
+  if (data.children && pathList.length) {
+    pathList.shift()
+    getMatched(pathList, data.children, matched)
+  }
+}
 function isDashboard(route) {
   const name = route && route.name
   if (!name) {
@@ -48,7 +78,7 @@ watchEffect(() => {
   }
   getBreadcrumb()
 })
-getBreadcrumb();
+getBreadcrumb()
 </script>
 
 <style lang='scss' scoped>