diff --git a/src/icons/svg/menu.svg b/src/icons/svg/menu.svg
new file mode 100644
index 0000000..5321191
--- /dev/null
+++ b/src/icons/svg/menu.svg
@@ -0,0 +1 @@
+<svg t="1651750906395" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9162" width="200" height="200"><path d="M904 158H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM904 582H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM904 794H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM904 370H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" p-id="9163"></path></svg>
diff --git a/src/router/index.ts b/src/router/index.ts
index 5a1c8bb..0d71cc6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -54,6 +54,66 @@ export const constantRoutes: Array<RouteRecordRaw> = [
         }
       }
     ]
+  },
+  {
+    path: "/menu",
+    component: Layout,
+    redirect: "/menu/menu1",
+    name: "Menu",
+    meta: {
+      title: "多级菜单",
+      icon: "menu"
+    },
+    children: [
+      {
+        path: "menu1",
+        component: () => import("@/views/menu/menu1/index.vue"),
+        redirect: "/menu/menu1/menu1-1",
+        name: "Menu1",
+        meta: { title: "menu1" },
+        children: [
+          {
+            path: "menu1-1",
+            component: () => import("@/views/menu/menu1/menu1-1/index.vue"),
+            name: "Menu1-1",
+            meta: { title: "menu1-1" }
+          },
+          {
+            path: "menu1-2",
+            component: () => import("@/views/menu/menu1/menu1-2/index.vue"),
+            redirect: "/menu/menu1/menu1-2/menu1-2-1",
+            name: "Menu1-2",
+            meta: { title: "menu1-2" },
+            children: [
+              {
+                path: "menu1-2-1",
+                component: () => import("@/views/menu/menu1/menu1-2/menu1-2-1/index.vue"),
+                name: "Menu1-2-1",
+                meta: { title: "menu1-2-1" }
+              },
+              {
+                path: "menu1-2-2",
+                component: () => import("@/views/menu/menu1/menu1-2/menu1-2-2/index.vue"),
+                name: "Menu1-2-2",
+                meta: { title: "menu1-2-2" }
+              }
+            ]
+          },
+          {
+            path: "menu1-3",
+            component: () => import("@/views/menu/menu1/menu1-3/index.vue"),
+            name: "Menu1-3",
+            meta: { title: "menu1-3" }
+          }
+        ]
+      },
+      {
+        path: "menu2",
+        component: () => import("@/views/menu/menu2/index.vue"),
+        name: "Menu2",
+        meta: { title: "menu2" }
+      }
+    ]
   }
 ]
 
diff --git a/src/views/menu/menu1/index.vue b/src/views/menu/menu1/index.vue
new file mode 100644
index 0000000..ccb9e66
--- /dev/null
+++ b/src/views/menu/menu1/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="app-container">
+    <el-card header="menu 1">
+      <router-view />
+    </el-card>
+  </div>
+</template>
diff --git a/src/views/menu/menu1/menu1-1/index.vue b/src/views/menu/menu1/menu1-1/index.vue
new file mode 100644
index 0000000..7579771
--- /dev/null
+++ b/src/views/menu/menu1/menu1-1/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="app-container">
+    <el-card> menu 1-1 </el-card>
+  </div>
+</template>
diff --git a/src/views/menu/menu1/menu1-2/index.vue b/src/views/menu/menu1/menu1-2/index.vue
new file mode 100644
index 0000000..006a734
--- /dev/null
+++ b/src/views/menu/menu1/menu1-2/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="app-container">
+    <el-card header="menu 1-2">
+      <router-view />
+    </el-card>
+  </div>
+</template>
diff --git a/src/views/menu/menu1/menu1-2/menu1-2-1/index.vue b/src/views/menu/menu1/menu1-2/menu1-2-1/index.vue
new file mode 100644
index 0000000..e14d3fb
--- /dev/null
+++ b/src/views/menu/menu1/menu1-2/menu1-2-1/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="app-container">
+    <el-card> menu 1-2-1 </el-card>
+  </div>
+</template>
diff --git a/src/views/menu/menu1/menu1-2/menu1-2-2/index.vue b/src/views/menu/menu1/menu1-2/menu1-2-2/index.vue
new file mode 100644
index 0000000..c396917
--- /dev/null
+++ b/src/views/menu/menu1/menu1-2/menu1-2-2/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="app-container">
+    <el-card> menu 1-2-2 </el-card>
+  </div>
+</template>
diff --git a/src/views/menu/menu1/menu1-3/index.vue b/src/views/menu/menu1/menu1-3/index.vue
new file mode 100644
index 0000000..59682a3
--- /dev/null
+++ b/src/views/menu/menu1/menu1-3/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="app-container">
+    <el-card> menu 1-3 </el-card>
+  </div>
+</template>
diff --git a/src/views/menu/menu2/index.vue b/src/views/menu/menu2/index.vue
new file mode 100644
index 0000000..4aada80
--- /dev/null
+++ b/src/views/menu/menu2/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="app-container">
+    <el-card> menu 2 </el-card>
+  </div>
+</template>