暂存

src/pages/router.page.vue

@@ -3,6 +3,31 @@ import { createGetRoutes, setupLayoutsResult } from '@/plugins/router';
 import { routes } from 'vue-router/auto-routes';
 const router = useRouter();
 
+const menuItems = computed(() => {
+  let flatArray: Record<string, string>[] = createGetRoutes(router)()
+    .filter((route) => !route.path.includes('/:'))
+    .map((route) => ({
+      id: route.path,
+      name: `${(route.name as string) || route.path}`,
+    }));
+
+  flatArray = flatArray.map((item, index) => {
+    let id = item.id;
+    if (flatArray.some((item) => item.id.startsWith(`${id}/`))) {
+      id = `${id}/`;
+    }
+    // 去掉最前面的 /
+    id = id.replace(/^\//, '');
+    return {
+      id: id,
+      parentId: id.replace(/\/[^/]+$/, ''),
+      name: item.name,
+    };
+  });
+  console.debug(`flatArray :>> `, JSON.stringify(flatArray, null, 2));
+  return flatArray;
+});
+
 const list = [
   {
     title: 'routes',
@@ -23,10 +48,6 @@ const list = [
       components: undefined,
     })),
   },
-  // {
-  //   title: 'createGetRoutes(router, true)()',
-  //   json: createGetRoutes(router, true)(),
-  // },
   {
     title: 'router.getRoutes()',
     json: router.getRoutes().map((route) => ({
@@ -38,10 +59,14 @@ const list = [
       components: undefined,
     })),
   },
+  {
+    title: 'menuItems',
+    json: menuItems.value,
+  },
 ];
 </script>
 <template>
-  <Tabs :value="list[0].title">
+  <Tabs :value="list[0].title" scrollable>
     <TabList>
       <Tab v-for="item in list" :key="item.title" :value="item.title">{{ item.title }}</Tab>
     </TabList>