ant-design-vue使用menu选中菜单刷新之后默认展开和选中

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

// template

              
            

// 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.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。