diff --git a/src/pages/a/a.page.vue b/src/pages/a/a1.page.vue
similarity index 72%
rename from src/pages/a/a.page.vue
rename to src/pages/a/a1.page.vue
index 7f5e2c6..fb62d1f 100644
--- a/src/pages/a/a.page.vue
+++ b/src/pages/a/a1.page.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>src/pages/a/a.vue</div>
+  <div></div>
 </template>
 
 <script setup lang="ts"></script>
diff --git a/src/pages/a/a2.page.vue b/src/pages/a/a2.page.vue
new file mode 100644
index 0000000..fb62d1f
--- /dev/null
+++ b/src/pages/a/a2.page.vue
@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/pages/a/b/c.page.vue b/src/pages/a/b/c.page.vue
new file mode 100644
index 0000000..fb62d1f
--- /dev/null
+++ b/src/pages/a/b/c.page.vue
@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/pages/router.page.vue b/src/pages/router.page.vue
index 3b87b9f..5a88b12 100644
--- a/src/pages/router.page.vue
+++ b/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>
diff --git a/typed-router.d.ts b/typed-router.d.ts
index 07e1254..a54e237 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -22,7 +22,9 @@ declare module 'vue-router/auto-routes' {
     '$Path': RouteRecordInfo<'$Path', '/:path(.*)', { path: ParamValue<true> }, { path: ParamValue<false> }>,
     '中文页面': RouteRecordInfo<'中文页面', '/中文-页面', Record<never, never>, Record<never, never>>,
     'A': RouteRecordInfo<'A', '/a', Record<never, never>, Record<never, never>>,
-    'AA': RouteRecordInfo<'AA', '/a/a', Record<never, never>, Record<never, never>>,
+    'AA1': RouteRecordInfo<'AA1', '/a/a1', Record<never, never>, Record<never, never>>,
+    'AA2': RouteRecordInfo<'AA2', '/a/a2', Record<never, never>, Record<never, never>>,
+    'ABC': RouteRecordInfo<'ABC', '/a/b/c', Record<never, never>, Record<never, never>>,
     'Api': RouteRecordInfo<'Api', '/api', Record<never, never>, Record<never, never>>,
     'DataLoadersId': RouteRecordInfo<'DataLoadersId', '/data-loaders/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     'DataLoadersIdSub1UserId': RouteRecordInfo<'DataLoadersIdSub1UserId', '/data-loaders/:id/sub-1/:userId', { id: ParamValue<true>, userId: ParamValue<true> }, { id: ParamValue<false>, userId: ParamValue<false> }>,