fix Bug or add example

src/layout/components/Menu/index.vue

@@ -1,14 +1,22 @@
 <template>
-  <NMenu :options="menus" :inverted="inverted" :mode="mode" :collapsed="collapsed" :collapsed-width="64"
-         :collapsed-icon-size="20"
-         @update:value="clickMenuItem" :default-expanded-keys="openKeys" v-model:value="selectedKeys">
+  <NMenu
+      :options="menus"
+      :inverted="inverted"
+      :mode="mode"
+      :collapsed="collapsed"
+      :collapsed-width="64"
+      :collapsed-icon-size="20"
+      :expanded-keys="openKeys"
+      v-model:value="selectedKeys"
+      @update:value="clickMenuItem"
+      @update:expanded-keys="menuExpanded"
+  >
   </NMenu>
 </template>
 
 <script lang="ts">
 import { defineComponent, reactive, computed, watch, toRefs, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useUserStore } from '@/store/modules/user'
 import { useAsyncRouteStore } from '@/store/modules/asyncRoute'
 import { generatorMenu } from '@/utils/index'
 import { useProjectSettingStore } from "@/store/modules/projectSetting";
@@ -32,14 +40,16 @@ export default defineComponent({
     const currentRoute = useRoute()
     const router = useRouter()
     const asyncRouteStore = useAsyncRouteStore()
-    const userStore = useUserStore()
     const settingStore = useProjectSettingStore()
     const { mode } = props
+
     // 获取当前打开的子菜单
-    const getOpenKeys = () => [currentRoute.matched[0]?.name]
+    const matched = currentRoute.matched
+
+    const getOpenKeys = matched && matched.length ? [matched[0]?.name] : []
 
     const state = reactive({
-      openKeys: getOpenKeys(),
+      openKeys: getOpenKeys,
       selectedKeys: currentRoute.name,
     })
 
@@ -53,25 +63,23 @@ export default defineComponent({
 
     // 监听菜单收缩状态
     watch(
-      () => props.collapsed,
-      (newVal) => {
-        state.openKeys = newVal ? [] : getOpenKeys()
-        state.selectedKeys = currentRoute.name
-      }
+        () => props.collapsed,
+        (newVal) => {
+          state.openKeys = newVal ? [] : getOpenKeys
+          state.selectedKeys = currentRoute.name
+        }
     )
 
     // 跟随页面路由变化，切换菜单选中状态
     watch(
-      () => currentRoute.fullPath,
-      () => {
-        if (currentRoute.name == 'login' || props.collapsed) return
-        state.openKeys = getOpenKeys()
-        state.selectedKeys = currentRoute.name
-      }
+        () => currentRoute.fullPath,
+        () => {
+          state.selectedKeys = currentRoute.name
+        }
     )
 
     // 点击菜单
-    const clickMenuItem = (key, item) => {
+    function clickMenuItem(key: string) {
       if (/http(s)?:/.test(key)) {
         window.open(key)
       } else {
@@ -79,12 +87,20 @@ export default defineComponent({
       }
     }
 
+    //展开菜单
+    function menuExpanded(openKeys: string[]) {
+      if (!openKeys) return
+      const latestOpenKey = openKeys.pop();
+      state.openKeys = latestOpenKey ? [latestOpenKey] : []
+    }
+
     return {
       ...toRefs(state),
       inverted,
       menus,
       mode,
-      clickMenuItem
+      clickMenuItem,
+      menuExpanded
     }
   }
 })