✨ feat(Menu): 修改菜单组件以使用路由名称，优化路由管理

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>{{ $route.fullPath }}</div>
+  <!-- <div>{{ $route.fullPath }}</div> -->
   <RouterView />
 </template>
 <style>

src/router/index.ts

@@ -9,11 +9,11 @@ import orderDetail from '../views/order/orderDetail.vue'
 import ExitView from '../views/exit/index.vue'
 import GoodsView from '../views/goods/index.vue'
 
-const routes: RouteRecordRaw[] = [
+export const routes: RouteRecordRaw[] = [
   { path: '/login', component: LoginView },
   {
-    path:'/',
-    redirect:'/font',
+    path: '/',
+    redirect: '/font',
   },
   {
     path: '/font',
@@ -40,25 +40,103 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: '/back',
-    redirect:'/back/menu',
+    redirect: '/back/dishManagement/dishCategory',
     component: backLayout,
-    children: [
-      { path: 'menu', component: MenuView },
+    children:[
+      // 菜品管理相关
       {
-        path: 'order',
+        path: 'dishManagement',
+        name: 'DishManagement',
+        meta: {
+          title: '菜品管理',
+          icon: 'Dish'
+        },
         children: [
-          {
-            path: 'orderList',
+          { 
+            path: 'dishCategory', 
+            name: 'DishCategory',
+            component: ()=>import('@/views/dishManagement/dishCategory.vue'),
+            meta: {
+              title: '菜品分类',
+              icon: 'Dish'
+            }
+          },
+          { 
+            path: 'dishInfo', 
+            name: 'DishInfo',
+            component: ()=>import("@/views/dishManagement/dishInfo/index.vue"),
+            meta: {
+              title: '菜品信息',
+              icon: 'Dish'
+            }
+          },
+          { 
+            path: 'specificationManagement', 
+            name: 'SpecificationManagement',
             component: OrderView,
+            meta: {
+              title: '规格管理',
+              icon: 'Dish'
+            }
           },
-          {
-            path: 'orderDetail',
-            component: orderDetail,
+        ],
+      },
+      // 桌子管理相关
+      {
+        path: 'tableManagement',
+        name: 'TableManagement',
+        meta: {
+          title: '桌子管理',
+          icon: 'Table'
+        },
+        children: [
+          { 
+            path: 'areaManagement', 
+            name: 'AreaManagement',
+            component: OrderView,
+            meta: {
+              title: '区域管理',
+              icon: 'Table'
+            }
+          },
+          { 
+            path: 'tableSettings', 
+            name: 'TableSettings',
+            component: OrderView,
+            meta: {
+              title: '桌子设置',
+              icon: 'Table'
+            }
           },
         ],
       },
-      { path: 'exit', component: ExitView },
-      { path: 'goods', component: GoodsView },
+      { 
+        path: 'materialManagement', 
+        name: 'MaterialManagement',
+        component: OrderView,
+        meta: {
+          title: '物料管理',
+          icon: 'Material'
+        }
+      },
+      { 
+        path: 'orderManagement', 
+        name: 'OrderManagement',
+        component: OrderView,
+        meta: {
+          title: '订单管理',
+          icon: 'Order'
+        }
+      },
+      { 
+        path: 'salesStatistics', 
+        name: 'SalesStatistics',
+        component: OrderView,
+        meta: {
+          title: '销售统计',
+          icon: 'Statistics'
+        }
+      },
     ],
   },
   {

src/views/layout/components/elMenu.vue

@@ -1,8 +1,8 @@
 <template>
-    <el-menu router :default-active="$route.path">
-        <template v-for="route in routes" :key="route.path">
+    <el-menu router :default-active="$route.name" style="height: 100%;">
+        <template v-for="route in routes" :key="route.name">
             <!-- 有子路由的情况 -->
-            <el-sub-menu v-if="route.children?.length" :index="route.path">
+            <el-sub-menu v-if="route.children?.length" :index="route.name">
                 <template #title>
                     <el-icon v-if="route.meta?.icon">
                         <component :is="route.meta.icon" />
@@ -10,8 +10,8 @@
                     <span>{{ route.meta?.title }}</span>
                 </template>
                 <!-- 修改为 el-menu-item -->
-                <template v-for="childRoute in route.children" :key="childRoute.path">
-                    <el-menu-item :index="childRoute.path" @click="handleClick(childRoute)">
+                <template v-for="childRoute in route.children" :key="childRoute.name">
+                    <el-menu-item :index="childRoute.name" @click="handleClick(childRoute)">
                         <el-icon v-if="childRoute.meta?.icon">
                             <component :is="childRoute.meta.icon" />
                         </el-icon>
@@ -21,7 +21,7 @@
             </el-sub-menu>
 
             <!-- 无子路由的情况 -->
-            <el-menu-item v-else :index="route.path" @click="handleClick(route)">
+            <el-menu-item v-else :index="route.name" @click="handleClick(route)">
                 <el-icon v-if="route.meta?.icon">
                     <component :is="route.meta.icon" />
                 </el-icon>
@@ -33,36 +33,17 @@
 
 <script setup>
 import { useRouter } from 'vue-router'
+import {routes as route} from '@/router'
+import { ref } from 'vue'
 
-// 定义 props 接收 routes
-defineProps({
-    routes: {
-        type: Array,
-        default: () => [
-
-            {
-                path: 'dashboard',
-                name: 'Dashboard',
-                meta: { title: '仪表盘', icon: 'DataAnalysis' },
-            },
-            {
-                path: 'user',
-                meta: { title: '用户管理', icon: 'User' },
-                children: [
-                    {
-                        path: 'list',
-                        name: 'UserList',
-                        meta: { title: '用户列表' },
-                    }
-                ]
-            }
-
-        ]
-    }
-})
+const routes = ref([])
 
+// 在 setup 函数中进行赋值
+const defaultRoutes = route[3].children
+routes.value = defaultRoutes
+console.log(defaultRoutes,'defaultRoutes')
 const router = useRouter()
 const handleClick = (route) => {
-    router.push(route.path)
+    router.push({ name: route.name})
 }
 </script>