feat: 多级菜单例子

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>

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" }
+      }
+    ]
   }
 ]
 

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>

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>

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>

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>

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>

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>

src/views/menu/menu2/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="app-container">
+    <el-card> menu 2 </el-card>
+  </div>
+</template>