ant design vue menu刷新保持 折叠 展开状态

在 Ant Design Vue 的 Menu 组件中，如果你想要在刷新页面后保持菜单的折叠或展开状态，可以通过以下步骤进行操作：

1. 首先，你需要在组件中引入 `localStorage` 对象。

import { localStorage } from 'window';

2. 然后，在你的菜单组件中，使用 `defaultOpenKeys` 和 `defaultSelectedKeys` 属性来设置默认的折叠和选中状态。

<template>
  <a-menu :default-open-keys="defaultOpenKeys" :default-selected-keys="defaultSelectedKeys">
    <!-- 菜单项内容 -->
  </a-menu>
</template>

<script>
export default {
  data() {
    return {
      defaultOpenKeys: [],
      defaultSelectedKeys: [],
    };
  },
  mounted() {
    this.restoreMenuState(); // 在组件挂载后恢复菜单状态
  },
  methods: {
    saveMenuState() {
      localStorage.setItem('menuState', JSON.stringify({
        openKeys: this.$refs.menu.openKeys,
        selectedKeys: this.$refs.menu.selectedKeys,
      }));
    },
    restoreMenuState() {
      const menuState = localStorage.getItem('menuState');
      if (menuState) {
        const { openKeys, selectedKeys } = JSON.parse(menuState);
        this.defaultOpenKeys = openKeys;
        this.defaultSelectedKeys = selectedKeys;
      }
    },
  },
};
</script>

3. 在菜单组件中，使用 `@openChange` 事件监听菜单折叠状态的变化，并在变化时保存菜单状态。

<template>
  <a-menu :default-open-keys="defaultOpenKeys" :default-selected-keys="defaultSelectedKeys" @openChange="saveMenuState">
    <!-- 菜单项内容 -->
  </a-menu>
</template>

<script>
export default {
  // ...
  methods: {
    saveMenuState(openKeys) {
      this.defaultOpenKeys = openKeys;
      this.saveMenuState(); // 保存菜单状态
    },
    // ...
  },
};
</script>

通过以上步骤，你可以在刷新页面后保持 Ant Design Vue 的 Menu 组件的折叠和展开状态。请注意，这里使用了 `localStorage` 对象来存储菜单状态，所以请确保你的浏览器支持该特性。