Ant Design Vue 菜单刷新后保持菜单选中/点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁

本文链接：https://blog.csdn.net/kiyoometal/article/details/106810794

本文介绍了如何在Ant Design Vue中实现菜单选中状态在刷新后保持，以及点击菜单时收起其他展开的菜单，保持界面简洁。通过设置defaultSelectedKeys属性并结合vue的$route.path，可以实现在刷新后菜单仍保持选中状态。同时，通过监听菜单点击事件，可以实现点击一个菜单时，自动收起其他展开的菜单，确保菜单的焦点集中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在刷新后保持菜单选中

antd的API中提供了一个defaultSelectedKeys参数
描述：初始选中的菜单项 key 数组
类型： string[] 自己手动实验得知意思就是在数组中填入字符串例如[‘key’]
默认值为空

在菜单标签中设置 defaultSelectedKeys属性指向this.$route.path即可

2、点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁

<template>
  <div>
    <a-menu mode="inline" :open-keys="openKeys" style="width: 256px" @openChange="onOpenChange">
      <a-sub-menu key="sub1">
        <span slot="title"><a-icon type="mail" /><span>Navigation One</span></span>
        <a-menu-item key="1">
          Option 1
        </a-menu-item>
        <a-menu-item key="2">
          Option 2
        </a-menu-item>
        <a-menu-item key="3">
          Option 3
        </a-menu-item>
        <a-menu-item key="4">
          Option 4
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>
        <a-menu-item key="5">
          Option 5
        </a-menu-item>
        <a-menu-item key="6">
          Option 6
        </a-menu-item>
        <a-sub-menu key="sub3" title="Submenu">
          <a-menu-item key="7">
            Option 7
          </a-menu-item>
          <a-menu-item key="8">
            Option 8
          </a-menu-item>
        </a-sub-menu>
      </a-sub-menu>
      <a-sub-menu key="sub4">
        <span slot="title"><a-icon type="setting" /><span>Navigation Three</span></span>
        <a-menu-item key="9">
          Option 9
        </a-menu-item>
        <a-menu-item key="10">
          Option 10
        </a-menu-item>
        <a-menu-item key="11">
          Option 11
        </a-menu-item>
        <a-menu-item key="12">
          Option 12
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
      openKeys: ['sub1'],
    };
  },
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
  },
};
</script>