menu展示问题

src/views/main/components/menu.vue

@@ -81,6 +81,14 @@ const handleMenuClick = (menu: MenuItem) => {
     currentMenuIndex.value = menu.index;
   }
 };
+
+const route = useRoute();
+const isCurrentMenu = (menu: MenuItem) => {
+  // console.log(route, menu);
+  // 判断route.path是否包含menu.route
+
+  return route.path.startsWith(menu.route);
+};
 </script>
 
 <template>
@@ -97,13 +105,10 @@ const handleMenuClick = (menu: MenuItem) => {
         :icon-class="menu.icon"
         size="24"
         :style="{
-          color: menu.index === currentMenuIndex ? 'white' : '#AFB9D0',
+          color: isCurrentMenu(menu) ? 'white' : '#AFB9D0',
         }"
       />
-      <div
-        class="name"
-        :class="[menu.index === currentMenuIndex ? 'selected' : 'normal']"
-      >
+      <div class="name" :class="[isCurrentMenu(menu) ? 'selected' : 'normal']">
         {{ menu.name }}
       </div>
     </div>