refactor: 精简多级路由示例页面

src/pages/level1/level2/index.vue

@@ -1,22 +1,29 @@
 <template>
   <div class="app-container">
     <h4>
+      <span>
         三级及其以上路由缓存功能默认关闭，需要请前往此配置文件中打开：
+      </span>
       <el-link
         type="primary"
-        href="https://github.com/un-pany/v3-admin-vite/blob/main/src/config/route.ts"
+        href="https://github.com/un-pany/v3-admin-vite/blob/main/src/router/config.ts"
         target="_blank"
       >
-        src/config/route.ts
+        src/router/config.ts
       </el-link>
     </h4>
-    <el-card header="二级路由 - menu1">
+    <el-card header="二级路由">
       <router-view />
     </el-card>
   </div>
 </template>
 
 <style lang="scss" scoped>
+h4 {
+  display: flex;
+  align-items: center;
+}
+
 .el-link {
   font-size: 18px;
 }

src/pages/level1/level2/level3/index.vue

@@ -2,7 +2,7 @@
 import { ref } from "vue"
 
 defineOptions({
-  name: "Menu13"
+  name: "Level3"
 })
 
 const text = ref("")
@@ -10,8 +10,8 @@ const text = ref("")
 
 <template>
   <div class="app-container">
-    <el-card header="三级路由缓存 - menu1-3">
+    <el-card header="三级路由">
-      <el-input v-model="text" />
+      <el-input v-model="text" placeholder="输入任意字符测试缓存" />
     </el-card>
   </div>
 </template>

src/pages/menu/menu1/menu1-1/index.vue

@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import { ref } from "vue"
-
-defineOptions({
-  name: "Menu11"
-})
-
-const text = ref("")
-</script>
-
-<template>
-  <div class="app-container">
-    <el-card header="三级路由缓存 - menu1-1">
-      <el-input v-model="text" />
-    </el-card>
-  </div>
-</template>

src/pages/menu/menu1/menu1-2/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-card header="三级路由 - menu1-2">
-      <router-view />
-    </el-card>
-  </div>
-</template>

src/pages/menu/menu1/menu1-2/menu1-2-1/index.vue

@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import { ref } from "vue"
-
-defineOptions({
-  name: "Menu121"
-})
-
-const text = ref("")
-</script>
-
-<template>
-  <div class="app-container">
-    <el-card header="四级路由缓存 - menu1-2-1">
-      <el-input v-model="text" />
-    </el-card>
-  </div>
-</template>

src/pages/menu/menu1/menu1-2/menu1-2-2/index.vue

@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import { ref } from "vue"
-
-defineOptions({
-  name: "Menu122"
-})
-
-const text = ref("")
-</script>
-
-<template>
-  <div class="app-container">
-    <el-card header="四级路由缓存 - menu1-2-2">
-      <el-input v-model="text" />
-    </el-card>
-  </div>
-</template>

src/pages/menu/menu2/index.vue

@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import { ref } from "vue"
-
-defineOptions({
-  name: "Menu2"
-})
-
-const text = ref("")
-</script>
-
-<template>
-  <div class="app-container">
-    <el-card header="二级路由缓存 - menu2">
-      <el-input v-model="text" />
-    </el-card>
-  </div>
-</template>

src/router/index.ts

@@ -135,81 +135,35 @@ export const constantRoutes: RouteRecordRaw[] = [
     ]
   },
   {
-    path: "/menu",
+    path: "/level1",
     component: Layouts,
-    redirect: "/menu/menu1",
+    redirect: "/level1/level2",
-    name: "Menu",
+    name: "Level1",
     meta: {
-      title: "多级路由",
+      title: "一级路由",
-      svgIcon: "menu"
+      svgIcon: "level"
     },
     children: [
       {
-        path: "menu1",
+        path: "level2",
-        component: () => import("@/pages/menu/menu1/index.vue"),
+        component: () => import("@/pages/level1/level2/index.vue"),
-        redirect: "/menu/menu1/menu1-1",
+        redirect: "/level1/level2/level3",
-        name: "Menu1",
+        name: "Level2",
         meta: {
-          title: "menu1"
+          title: "二级路由",
+          alwaysShow: true
         },
         children: [
           {
-            path: "menu1-1",
+            path: "level3",
-            component: () => import("@/pages/menu/menu1/menu1-1/index.vue"),
+            component: () => import("@/pages/level1/level2/level3/index.vue"),
-            name: "Menu1-1",
+            name: "Level3",
             meta: {
-              title: "menu1-1",
+              title: "三级路由",
-              keepAlive: true
-            }
-          },
-          {
-            path: "menu1-2",
-            component: () => import("@/pages/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("@/pages/menu/menu1/menu1-2/menu1-2-1/index.vue"),
-                name: "Menu1-2-1",
-                meta: {
-                  title: "menu1-2-1",
-                  keepAlive: true
-                }
-              },
-              {
-                path: "menu1-2-2",
-                component: () => import("@/pages/menu/menu1/menu1-2/menu1-2-2/index.vue"),
-                name: "Menu1-2-2",
-                meta: {
-                  title: "menu1-2-2",
               keepAlive: true
             }
           }
         ]
-          },
-          {
-            path: "menu1-3",
-            component: () => import("@/pages/menu/menu1/menu1-3/index.vue"),
-            name: "Menu1-3",
-            meta: {
-              title: "menu1-3",
-              keepAlive: true
-            }
-          }
-        ]
-      },
-      {
-        path: "menu2",
-        component: () => import("@/pages/menu/menu2/index.vue"),
-        name: "Menu2",
-        meta: {
-          title: "menu2",
-          keepAlive: true
-        }
       }
     ]
   },