关于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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。