order-system/src/layout/Index.vue

@@ -7,7 +7,11 @@
     </el-aside>
     <el-container>
       <el-header class="header">Header</el-header>
-      <el-main class="main">Main</el-main>
+      <el-main class="main">
+
+        <!-- 路由跳转后，页面显示在main区域 -->
+        <router-view></router-view>
+      </el-main>
     </el-container>
   </el-container>
 </template>

order-system/src/layout/Menu.vue

@@ -4,7 +4,13 @@
   <MenuLogo></MenuLogo>
 
   <!-- 菜单区域 -->
-  <el-menu background-color="#00c6bf" default-active="1" class="el-menu-vertical-demo">
+  <!-- 通过当前路由获取路径返回给defalut-active,将默认事件绑定在当前路由路径上 -->
+  <el-menu 
+    router background-color="#00c6bf"
+    
+    :default-active="activeIndex" 
+    class="el-menu-vertical-demo"> 
+
   <!-- 注释掉暂时不需要的多余属性 -->
     <!-- <el-sub-menu index="1">
       <template #title>
@@ -34,27 +40,27 @@
     </el-menu-item> -->
 
     <!-- 添加菜单栏选项 -->
-    <el-menu-item index="1">
+    <el-menu-item index="/user">
       <el-icon><Menu /></el-icon>
       <template #title>用户管理</template>
     </el-menu-item>
-    <el-menu-item index="2">
+    <el-menu-item index="/category">
       <el-icon><Menu /></el-icon>
       <template #title>菜品分类</template>
     </el-menu-item>
-    <el-menu-item index="3">
+    <el-menu-item index="/goods">
       <el-icon><Memo /></el-icon>
       <template #title>菜品管理</template>
     </el-menu-item>
-    <el-menu-item index="4">
+    <el-menu-item index="/order">
       <el-icon><Monitor /></el-icon>
       <template #title>订单管理</template>
     </el-menu-item>
-    <el-menu-item index="5">
+    <el-menu-item index="banner">
       <el-icon><Calendar /></el-icon>
       <template #title>广告管理</template>
     </el-menu-item>
-    <el-menu-item index="6">
+    <el-menu-item index="comment">
       <el-icon><Edit /></el-icon>
       <template #title>评论管理</template>
     </el-menu-item>
@@ -70,6 +76,22 @@
 
   // 引入MenuLogo
   import MenuLogo from './MenuLogo.vue'
+
+  // 添加 computed 导入
+  import { ref, computed } from 'vue'
+
+
+  // 引入路由
+  import {useRoute} from 'vue-router'
+
+  // 获取当前路由
+  const route = useRoute()
+
+  // 通过当前路由路径，获取激活选项
+  const activeIndex = computed(()=>{
+    const { path } = route
+    return path
+  })
 </script>
 
 <style scoped lang="scss">

order-system/src/router/index.ts

@@ -11,8 +11,42 @@ import Layout from '@/layout/Index.vue'
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/home',
-    name: 'Home',
-    component: Layout
+    name: 'home', //name中home大小写错误，第32次提交之前为大写
+    component: Layout,
+
+    // 添加子页面路由
+    children: [
+      {
+        path: '/banner',
+        name: 'banner',
+        component: () => import('@/views/banner/Index.vue')
+      },
+      {
+        path: '/category',
+        name: 'category',
+        component: () => import('@/views/category/Index.vue')
+      },
+      {
+        path: '/comment',
+        name: 'comment',
+        component: () => import('@/views/comment/Index.vue')
+      },
+      {
+        path: '/goods',
+        name: 'goods',
+        component: () => import('@/views/goods/Index.vue')
+      },
+      {
+        path: '/order',
+        name: 'order',
+        component: () => import('@/views/order/Index.vue')
+      },
+      {
+        path: '/user',
+        name: 'user',
+        component: () => import('@/views/user/Index.vue')
+      },
+    ]
   }
 ]
 

order-system/src/views/banner/Index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    广告管理
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

order-system/src/views/category/Index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    菜品分类
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

order-system/src/views/comment/Index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    评论管理
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

order-system/src/views/goods/Index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    菜品管理
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

order-system/src/views/order/Index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    订单管理
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

order-system/src/views/user/Index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    用户管理
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

order-system/src/vite-env.d.ts

@@ -8,6 +8,19 @@ interface ObjectConstructor {
   entries(o: {}): [string, any][];
 }
 
+// 添加Promise方法声明
+interface PromiseConstructor {
+  all<T>(values: Iterable<T | PromiseLike<T>>): Promise<T[]>;
+  race<T>(values: Iterable<T | PromiseLike<T>>): Promise<T>;
+  resolve<T>(value?: T | PromiseLike<T>): Promise<T>;
+  reject<T = never>(reason?: any): Promise<T>;
+  any<T>(values: Iterable<T | PromiseLike<T>>): Promise<T>;
+  allSettled<T>(values: Iterable<T | PromiseLike<T>>): Promise<PromiseSettledResult<T>[]>;
+}
+
+// 添加全局 Promise 声明
+declare var Promise: PromiseConstructor;
+
 // 声明 Vue 文件模块
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'

order-system/tsconfig.app.json

@@ -1,6 +1,7 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
+    
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     // 添加以下路径配置
     "baseUrl": ".",
@@ -10,10 +11,8 @@
       ]
     },
     // 添加必要的库支持
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
+    "lib": ["ES2015", "ES2015.Promise", "DOM", "DOM.Iterable", "ESNext"],
+    
     // 添加模块解析配置
     "module": "ESNext",
     "moduleResolution": "Node",
@@ -22,7 +21,9 @@
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "strict": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+
+    "downlevelIteration": true,
   },
   "include": [
     "src/**/*.ts",