本篇文章给大家了解一下ant design vue中menu菜单的使用方法，介绍一下其中的常用属性、常用事件，以及如何递归嵌套多级菜单，希望对大家有所帮助！
版本ant-design-vue: ^1.7.4,
常用属性属性说明默认值
mode 菜单类型，现在支持垂直、水平、和内嵌模式三种 vertical
inlinecollapsed inline 时菜单是否收起状态
theme 主题颜色(light/dark) light
openkeys(.sync) 当前展开的 submenu 菜单项 key 数组
defaultopenkeys 初始展开的 submenu 菜单项 key 数组
selectedkeys(v-model) 当前选中的菜单项 key 数组
defaultselectedkeys 初始选中的菜单项 key 数组
说明
defaultselectedkeys 是默认选中的key（a-menu-item上绑定的key），被选中会有高亮的显示效果；selectedkeys 也是一样的作用，不要同时使用，区别在于如果只希望指定一个初始化的菜单选项就使用defaultselectedkeys，如果需要通过自己修改数据来选中菜单的选中项就使用selectedkeys。
（openkeys和defaultopenkeys也是同理）
常用事件openchange 是menu的事件，submenu 展开/关闭的回调
递归嵌套多级菜单若只有两级菜单则直接使用v-for和v-if指令即可完成；若菜单级数≥3则需要使用函数式组件。具体原因官网已经做了说明：
before v2.0, 因组件内部会动态更改a-sub-menu的属性，如果拆分成单文件，无法将属性挂载到a-sub-menu上，你需要自行声明属性并挂载。为了方便，避免属性的声明，我们推荐使用函数式组件。
代码
app.vue (测试就随便在app.vue里写了)
<template> <div id="app"> <div style="width: 256px"> <a-button type="primary" style="margin-bottom: 16px" @click="togglecollapsed"> <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" /> </a-button> <a-menu :defaultselectedkeys="[$route.path]" :openkeys="openkeys" mode="inline" theme="dark" :inline-collapsed="collapsed" @openchange="onopenchange" @click="menuclick" > <template v-for="item in list"> <a-menu-item v-if="!item.children" :key="item.path"> <a-icon type="pie-chart" /> <span>{{ item.title }}</span> </a-menu-item> <sub-menu v-else :key="item.path" :menu-info="item" /> </template> </a-menu> </div> <router-view/> </div></template><script>import { menu } from 'ant-design-vue';const submenu = { template: ` <a-sub-menu :key="menuinfo.key" v-bind="$props" v-on="$listeners"> <span slot="title"> <a-icon type="mail" /><span>{{ menuinfo.title }}</span> </span> <template v-for="item in menuinfo.children"> <a-menu-item v-if="!item.children" :key="item.path"> <a-icon type="pie-chart" /> <span>{{ item.title }}</span> </a-menu-item> <sub-menu v-else :key="item.path" :menu-info="item" /> </template> </a-sub-menu> `, name: 'submenu', // must add issubmenu: true 此项必须被定义 issubmenu: true, props: { // 解构a-sub-menu的属性，也就是文章开头提到的为什么使用函数式组件 ...menu.submenu.props, // cannot overlap with properties within menu.submenu.props menuinfo: { type: object, default: () => ({}), }, },};export default { name: "app", components: { 'sub-menu': submenu, }, data() { return { collapsed: false, openkeys: [], rootsubmenukeys: ['/user'], list: [ { key: '1', title: '信息管理', path: '/info', }, { key: '2', title: '用户管理', path: '/user', children: [ { key: '2.1', title: '后台用户', path: '/adminuser', children: [ { key: '2.1.1', title: '新增用户', path: '/addadminuser', children: [ { key: '2.1.1。1', title: '用户xx', path: '/addadminuserxx', } ] } ] }, { key: '2.2', title: '前台用户', path: '/frontuser', } ] } ], }; }, created(){ const openkeys = window.sessionstorage.getitem('openkeys') if(openkeys){ this.openkeys = json.parse(openkeys) } }, methods: { togglecollapsed() { this.collapsed = !this.collapsed; }, onopenchange(openkeys) { // 将当前打开的父级菜单存入缓存中 window.sessionstorage.setitem('openkeys', json.stringify(openkeys)) // 控制只打开一个 const latestopenkey = openkeys.find(key => this.openkeys.indexof(key) === -1); if (this.rootsubmenukeys.indexof(latestopenkey) === -1) { this.openkeys = openkeys; } else { this.openkeys = latestopenkey ? [latestopenkey] : []; } }, menuclick({key}) { // 获取到当前的key,并且跳转 this.$router.push({ path: key }) }, }};</script><style>#app { font-family: avenir, helvetica, arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 50px;}</style>
这里省略了router配置，相信在座的各位也会！（不会的底下留言，包教包会！）
如果vue报编译错误you are using the runtime-only build of vue，可以在vue的配置文件里加一行runtimecompiler: true，重新运行即可。
如果点击同一个菜单报错了navigationduplicated: avoided redundant navigation to current location，需要修改下router设置（router/index.js）：
const originalpush = router.prototype.pushrouter.prototype.push = function push(location) { return originalpush.call(this, location).catch(err => err)}
效果
自动渲染多级嵌套菜单；刷新会保存选中的菜单；点击菜单，收起其他展开的所有菜单。
【相关推荐：《vue.js教程》】
以上就是带你简单了解antdesign vue中menu菜单的用法的详细内容。