解决菜单报错问题

src/components/Layout/components/layout/blendLeft.vue

@@ -1,14 +1,7 @@
 <template>
   <a-layout style="min-height: 100vh">
-    <a-layout-sider
-      theme="dark"
-      :width="140"
-      :collapsed-width="48"
-      collapsible
-      :trigger="null"
-      @collapse="evMenuSecondLongShow"
-      v-model:collapsed="menuSecondLongShow"
-    >
+    <a-layout-sider theme="dark" :width="140" :collapsed-width="48" collapsible :trigger="null"
+      @collapse="evMenuSecondLongShow" v-model:collapsed="menuSecondLongShow">
       <div class="logo-layout">
         <div class="logo">
           <img src="@/assets/vite.svg" />
@@ -16,18 +9,9 @@
         </div>
       </div>
 
-      <a-menu
-        v-model:selectedKeys="menuTabSate"
-        theme="dark"
-        mode="inline"
-        @mouseleave="evMouseleaveMenu"
-      >
-        <a-menu-item
-          v-for="routeItem in routesData"
-          :key="routeItem.name"
-          @mouseenter="evMenuGetFn(routeItem, 'mouseenter')"
-          @click="changeRoutesItems(routeItem)"
-        >
+      <a-menu v-model:selectedKeys="menuTabSate" theme="dark" mode="inline" @mouseleave="evMouseleaveMenu">
+        <a-menu-item v-for="routeItem in routesData" :key="routeItem.name"
+          @mouseenter="evMenuGetFn(routeItem, 'mouseenter')" @click="changeRoutesItems(routeItem)">
           <template #icon>
             <svg-icon :icon="routeItem.meta.icon"></svg-icon>
           </template>
@@ -41,44 +25,23 @@
         <LayoutHeader />
       </a-layout-header>
       <a-layout>
-        <a-layout-sider
-          id="layout-sider"
-          :collapsed="false"
-          :width="
-            menuSecondData &&
-            menuSecondData.children &&
-            menuSecondData.children.length > 0
-              ? 160
-              : 0
-          "
-          @mouseleave="evMouseLeavesSubMenu"
-        >
-          <a-menu
-            :selectedKeys="routeItemSelectedKeys"
-            id="layout-sider"
-            theme="light"
-            mode="vertical"
-            :collapsed="false"
-            :auto-open="true"
-          >
+        <a-layout-sider id="layout-sider" :collapsed="false" :width="menuSecondData &&
+          menuSecondData.children &&
+          menuSecondData.children.length > 0
+          ? 160
+          : 0
+          " @mouseleave="evMouseLeavesSubMenu">
+          <a-menu :selectedKeys="routeItemSelectedKeys" id="layout-sider" theme="light" mode="vertical"
+            :collapsed="false" :auto-open="true">
             <template v-for="routeItem in menuSecondData?.children || []">
               <!-- {{ routeItem }} -->
-              <a-menu-item
-                v-if="!routeItem.children || routeItem.children.length === 0"
-                :key="routeItem.name?.toString()"
-                @click="evGoPage(routeItem)"
-              >
+              <a-menu-item v-if="!routeItem.children || routeItem.children.length === 0"
+                :key="routeItem.name?.toString()" @click="evGoPage(routeItem)">
                 <span class="menu-level-font">{{ routeItem.meta.title }}</span>
               </a-menu-item>
 
-              <template
-                v-else-if="routeItem.children && routeItem.children.length > 0"
-              >
-                <sub-menu
-                  :key="routeItem.name"
-                  :menu-info="routeItem"
-                  @go="evGoPage"
-                />
+              <template v-else-if="routeItem.children && routeItem.children.length > 0">
+                <sub-menu :key="routeItem.name" :menu-info="routeItem" @go="evGoPage" />
               </template>
             </template>
           </a-menu>
@@ -123,9 +86,10 @@ const evMenuSecondLongShow = () => {
   });
 };
 const evMouseleaveMenu = (e) => {
+
   if (
-    e.relatedTarget.offsetParent.id &&
-    e.relatedTarget.offsetParent.id == "layout-sider"
+    e.relatedTarget?.offsetParent?.id &&
+    e.relatedTarget?.offsetParent?.id == "layout-sider"
   )
     return;
   menuSecondData.value = menuSecondSelectedStatusData.value;
@@ -194,12 +158,14 @@ watch(
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
   z-index: 9;
 }
+
 .ant-layout-content {
   height: auto;
   min-height: auto;
   overflow-y: auto;
   padding: 0 20px;
 }
+
 .layout-content-main {
   flex: 1;
   padding: 0 1.2rem 1.6rem 1.2rem;
@@ -210,37 +176,45 @@ watch(
   display: flex;
   flex-wrap: wrap;
 }
+
 .logo-layout {
   height: 64px;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
+
   .logo {
     width: 100%;
     height: 32px;
     display: flex;
     justify-content: center;
     align-items: center;
+
     h3 {
       white-space: nowrap;
     }
   }
 }
+
 .arco-layout {
   color: @text_color_1;
   background: @layout-split-color !important;
   overflow: hidden;
 }
+
 :deep(.arco-menu-light) {
   background-color: @bg_color_3;
+
   .arco-menu-item {
     background-color: @bg_color_3;
   }
 }
+
 :deep(.arco-layout-sider-light) {
   background-color: @bg_color_3;
 }
+
 :deep(.arco-menu-inline-header) {
   font-weight: 600;
   color: @text_color_1;
@@ -253,49 +227,60 @@ watch(
   box-sizing: border-box;
   width: 100%;
 }
+
 :deep(.arco-menu-inline-content) {
   .arco-menu-selected {
     color: @text_color_1;
     background-color: @black_3;
+
     &:after {
       content: none;
     }
   }
 }
+
 #layout-sider {
   :deep(.arco-menu-selected) {
     color: @text_color_1 !important;
     font-weight: bold;
     background-color: @black_3;
+
     .arco-icon {
       color: @text_color_1 !important;
     }
+
     &:hover {
       background-color: rgba(235, 19, 19, 0.1) !important;
     }
   }
+
   :deep(.arco-menu-inline) {
     .arco-menu-inline-header {
       background-color: @bg_color_3;
       padding-left: 20px;
       left: 5px;
+
       svg {
         color: @text_color_1 !important;
         font-size: 14px;
       }
+
       .arco-menu-icon-suffix {
         color: @text_color_1 !important;
         left: 0px !important;
         right: auto;
       }
+
       &:hover {
         background-color: rgba(255, 255, 255, 0) !important;
       }
     }
+
     .arco-menu-item {
       padding: 0 5px;
     }
   }
+
   :deep(.arco-menu-item) {
     padding-left: 24px;
   }