关于vue.js:antdesignvue使用menu选中菜单刷新之后默认展开和选中

1. 开发环境 vue
2. 电脑系统 windows10 专业版
3. 在应用 ant-design-vue 开发的过程中, 咱们在应用到 menu 组件的时候, 选中菜单的时候刷新之后, 没有默认开展和选中, 上面我来分享一下办法。
4. 废话不多说, 间接上操作:

// template
<a-menu
              :open-keys="openKeys" // 要害代码
              @openChange="onOpenChange" // 要害代码
              :default-selected-keys="defaultselectedkeys" // 要害代码
              :default-open-keys="defaultopenkeys" // 要害代码
              mode="inline"
              theme="dark"
              :inline-collapsed="collapsed"
              @click="ClickMenu" // 要害代码
            >
              <template v-for="item in MenuList">
                <a-menu-item v-if="!item.children" :key="item.code">
                  <a-icon type="pie-chart" />
                  <span>{{item.name}}</span>
                </a-menu-item>
                <sub-menu v-else :key="item.code" :menu-info="item" />
              </template>
            </a-menu>

// return
rootSubmenuKeys: [], // 所有路由数据 ( 路由的 name)
    openKeys: [], // 选中示意父级列表 路由 name
    defaultselectedkeys: [], // 默认选中 路由 name
    defaultopenkeys: [], // 选中的菜单 id

// methods
ClickMenu({key}) {// console.log(key);
    this.defaultopenkeys[0] = "" + key;
    this.defaultselectedkeys[0] = key;
    //
    sessionStorage.setItem(
        "defaultopenkeys",
        JSON.stringify(this.defaultopenkeys)
    );
    sessionStorage.setItem(
        "defaultselectedkeys",
        JSON.stringify(this.defaultselectedkeys[0])
    );
    this.$router.push({name: key,},
        (onComplete) => {});
},

onOpenChange(openKeys) {// console.log(openKeys);
    console.log(this.openKeys);
    const latestOpenKey = openKeys.find((key) => this.openKeys.indexOf(key) === -1
    );

    if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {console.log(openKeys);
        this.openKeys = openKeys;
        sessionStorage.setItem("openKeys", JSON.stringify(this.openKeys));
    } else {console.log(openKeys);
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
        sessionStorage.setItem("openKeys", JSON.stringify(this.openKeys));
    }
},

5. 成果如下:

// 页面刷新之后, 选中的状态不变 

6. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。