新增路由嵌套

src/router/index.ts

@@ -11,6 +11,7 @@ import permissionRouter from './modules/permission'
 import tableRouter from './modules/table'
 import errorRouter from './modules/error'
 import excelRouter from './modules/excel'
+import nestedRouter from './modules/nested'
 
 
 interface extendRoute {
@@ -101,6 +102,7 @@ export const asyncRoutes = [
   chatRouter,
   componentsRouter,
   othersRouter,
+  nestedRouter,
     excelRouter,
     zipRoutes,
   errorRouter,

src/router/modules/nested.ts

@@ -0,0 +1,69 @@
+
+
+/** When your routing table is too long, you can split it into small modules**/
+
+import Layout from "@/layout/index.vue";
+
+const nestedRouter = {
+    path: '/nested',
+    component: Layout,
+    redirect: 'noRedirect',
+    name: 'nested',
+    meta: {
+        title: '路由嵌套',
+        icon: 'School'
+    },
+    children: [
+      {
+        path: 'menu1',
+        component: () => import('@/views/nested/menu1/index.vue'),
+        name: 'menu1',
+        meta: { title: '菜单1', },
+        alwaysShow:true,
+        children: [
+          {
+            path: 'menu1-1',
+            component: () => import('@/views/nested/menu1/menu1-1/index.vue'),
+            name: 'menu1-1',
+            meta: { title: '菜单 1-1' }
+          },
+          {
+            path: 'menu1-2',
+            component: () => import('@/views/nested/menu1/menu1-2/index.vue'),
+            name: 'menu1-2',
+            redirect: '/nested/menu1/menu1-2/menu1-2-1',
+            meta: { title: '菜单 1-2' },
+            children: [
+              {
+                path: 'menu1-2-1',
+                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1/index.vue'),
+                name: 'menu1-2-1',
+                meta: { title: '菜单 1-2-1' }
+              },
+              {
+                path: 'menu1-2-2',
+                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2/index.vue'),
+                name: 'menu1-2-2',
+                meta: { title: '菜单 1-2-2' }
+              }
+            ]
+          },
+          {
+            path: 'menu1-3',
+            component: () => import('@/views/nested/menu1/menu1-3/index.vue'),
+            name: 'menu1-3',
+            meta: { title: 'menu1-3' }
+          }
+        ]
+      },
+        {
+            path: 'menu2',
+            component: () => import('@/views/nested/menu2/index.vue'),
+            name: 'nested-menu2',
+            meta: { title: '菜单2', }
+        },
+
+    ]
+}
+
+export default nestedRouter

src/views/nested/menu1/index.vue

@@ -0,0 +1,7 @@
+<template >
+  <div style="padding:30px;">
+    <el-alert title="menu 1" :closable="false">
+      <router-view />
+    </el-alert>
+  </div>
+</template>

src/views/nested/menu1/menu1-1/index.vue

@@ -0,0 +1,7 @@
+<template >
+  <div style="padding:30px;">
+    <el-alert title="menu 1-1" type="success" :closable="false">
+      <router-view />
+    </el-alert>
+  </div>
+</template>

src/views/nested/menu1/menu1-2/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div style="padding:30px;">
+    <el-alert title="menu 1-2" type="success" :closable="false">
+      <router-view />
+    </el-alert>
+  </div>
+</template>

src/views/nested/menu1/menu1-2/menu1-2-1/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div style="padding:30px;">
+    <el-alert title="menu 1-2-1" type="warning" :closable="false" />
+  </div>
+</template>

src/views/nested/menu1/menu1-2/menu1-2-2/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div style="padding:30px;">
+    <el-alert title="menu 1-2-2" type="warning" :closable="false" />
+  </div>
+</template>

src/views/nested/menu1/menu1-3/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div style="padding:30px;">
+    <el-alert title="menu 1-3" type="success" :closable="false" />
+  </div>
+</template>

src/views/nested/menu2/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div style="padding:30px;">
+    <el-alert title="menu 2" :closable="false" />
+  </div>
+</template>