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

src/components/Breadcrumb/index.vue

@@ -11,20 +11,52 @@
 
 <script setup lang="ts">
 import { RouteLocationMatched } from 'vue-router';
+import usePermissionStore from '@/store/modules/permission';
 
 const route = useRoute();
 const router = useRouter();
+const permissionStore = usePermissionStore();
 const levelList = ref<RouteLocationMatched[]>([]);
 
 const 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.defaultRoutes, matched);
+  } else {
+    matched = route.matched.filter(item => item.meta && item.meta.title);
+  }
   // 判断是否为首页
-  if (!isDashboard(first)) {
-    matched = ([{ path: '/index', meta: { title: '首页' } }] as any).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);
+};
+const findPathNum = (str, char = '/') => {
+  let index = str.indexOf(char);
+  let num = 0;
+  while (index !== -1) {
+    num++;
+    index = str.indexOf(char, index + 1);
+  }
+  return num;
+};
+const getMatched = (pathList, routeList, matched) => {
+  let data = routeList.find(item => item.path == pathList[0] || (item.name += '').toLowerCase() == pathList[0]);
+  if (data) {
+    matched.push(data);
+    if (data.children && pathList.length) {
+      pathList.shift();
+      getMatched(pathList, data.children, matched);
+    }
   }
-  levelList.value = matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false);
 };
 const isDashboard = (route: RouteLocationMatched) => {
   const name = route && (route.name as string);