vue+ant-design-vue实现导航菜单循环遍历

.ant-layout-header{padding:0;}#components-layout-demo-custom-trigger.trigger{字体大小:18px;行高：64px；填充：024px；游标：指针；transition:color0.3s;}#components-layout-demo-custom-trigger.trigger:hover{color:#1890ff;}demo地址：https://gitee.com/shjin/menu_...1.创建vue项目vuecreatemenu_demo2.安装ant-design-vueyarnaddant-design-vue3.main.js文件导入ant-design-vueimportAntdfrom'ant-design-vue';import'ant-design-vue/dist/antd.css';Vue.use(Antd);4.菜单index.jsimportMenufrom"ant-design-vue/es/menu";从“ant-design-vue/es/icon”导入图标；const{Item,SubMenu}=Menu;exportdefault{name:"SMenu",props:{menu:{type:Array,required:true},theme：{类型：字符串，必需：假，默认值：“轻”}，模式：{类型：字符串，必需：假，默认值：“内联”}，折叠：{类型：布尔值，必需：假，默认值：假},},data(){return{openKeys:[],cachedOpenKeys:[],selectedKeys:['user1']};},computed:{rootSubmenuKeys:vm=>{constkeys=[];vm.menu.forEach(item=>keys.push(item.path));返回键；}}，安装（）{这个.updateMenu();},watch:{collapsed(val){if(val){this.cachedOpenKeys=this.openKeys.concat();this.openKeys=[];}else{this.openKeys=this.cachedOpenKeys;}},$route:function(){this.updateMenu();}},methods:{//选择菜单项onOpenChange(openKeys){//在水平模式下执行，并且不再执行后续if(this.mode==="horizo??ntal"){this.openKeys=openKeys;返回;}//非水平均模式时constlatestOpenKey=openKeys.find(key=>!this.openKeys.includes(key));如果(!this.rootSubmenuKeys.includes(latestOpenKey)){this.openKeys=openKeys;}else{this.openKeys=latestOpenKey？[最新打开密钥]：[]；}},updateMenu(){constroutes=this.$route.matched.concat();const{hidden}=this.$route.meta;if(routes.length>=3&&hidden){routes.pop();this.selectedKeys=[路线[routes.length-1].path];}else{this.selectedKeys=[routes.pop().path];}constopenKeys=[];if(this.mode==="inline"){routes.forEach(item=>{openKeys.push(item.path);});}//update-begin-author:taoyandate:20190510for:onlineform菜单点击展开一级目录错误if(!this.selectedKeys||this.selectedKeys[0].indexOf(":")<0){this.collapsed？(this.cachedOpenKeys=openKeys):(this.openKeys=openKeys);}//update-end-author:taoyandate:20190510For:onlineformmenu点击展开一级目录错误},//renderrenderItem(menu){if(!menu.hidden){returnmenu.children&&!menu.alwaysShow?this.renderSubMenu(菜单):this.renderMenuItem(菜单);}返回空值；},renderMenuItem(menu){letprops={to:{name:menu.name}};constattrs={target:menu.target};返回(<项目{...{键：menu.key}}>{this.renderIcon(menu.icon)}{menu.title}