ant-design-vue中使用a-menu刷新页面后菜单仍选中高亮

最新推荐文章于 2025-03-17 14:48:03 发布

kogmini

最新推荐文章于 2025-03-17 14:48:03 发布

阅读量5.5k

点赞数 6

分类专栏： ant-design 文章标签： ant-design vue3

本文链接：https://blog.csdn.net/csdnyp/article/details/125661006

版权

Vue3 Antd 动态菜单菜单配置事件处理

关键词由CSDN通过智能技术生成

ant-design 专栏收录该内容

1 篇文章

订阅专栏

一、Menu 所需参数

二、API

三、代码

概要：代码环境 vue3+antd

一、Menu 所需参数

selectedKeys：当前选中的菜单项 key 数组
openKeys：当前展开的 SubMenu 菜单项 key 数组
openChange：SubMenu 展开/关闭的回调
click：点击 MenuItem 调用此函数
mode：菜单类型，现在支持垂直（vertical ）、水平（horizontal ）、和内嵌模式（inline）三种

二、API

三、代码

<a-menu
    :selectedKeys="[route.path]"
    :openKeys="openKeys"
    @openChange="onOpenChange"
    @click="menuClick"
    mode="inline"
    class="menu"
>
    <template v-for="(menuItem,index) in menus" :key="menuItem.path">
        <template v-if="menuItem.children && menuItem.children.length > 0">
            <a-sub-menu :key="menuItem.path">
                <template #title>
                    <span class="menu_title">
                        <component :is="menuItem.icon"></component>
                        <span>{{ menuItem.title }}</span>
                    </span>
                </template>
                <a-menu-item v-for="(child, childIndex) in menuItem.children" :key="child.path">{{ child.title }}</a-menu-item>
            </a-sub-menu>
        </template>
        <template v-else>
            <a-menu-item :key="menuItem.path">
                <component :is="menuItem.icon"></component>
                <span>{{ menuItem.title }}</span>
            </a-menu-item>
        </template>
    </template>
</a-menu>

<script setup>
import {computed, ref, onMounted} from 'vue'
import {useRoute, useRouter} from "vue-router"

const router = useRouter()
const route = useRoute()

const selectedKeys = ref([])
const openKeys = ref([])
//获取你自己的菜单数据
const menus = computed(() => layoutStore.menuInfos)

const onOpenChange = keys => {
    let keyArr = []
    if (keys.length > 0) {
        //取最后一项，最后一项才是你当前展开的菜单
        keyArr.push(keys[keys.length - 1])
    }
    openKeys.value = keyArr
    sessionStorage.setItem('openKeys', JSON.stringify(keyArr))
 }

const menuClick = (item) => {
    router.push(item.key)
    //判断是否是一级菜单，一级菜单item.keyPath长度为1，二级菜单item.keyPath长度为2，清空二级菜单展开数组openKeys
    if (item.keyPath.length == 1) {
        sessionStorage.removeItem('openKeys')
        openKeys.value = []
    }
}

onMounted(() => {
    const openKey = sessionStorage.getItem('openKeys')
    if (openKey) {
        openKeys.value = JSON.parse(openKey)
    }
})

</script>

注意：

子菜单绑定的key要是path路径