最近在使用vue-cli3配合iview框架搭建新的项目中用到了iview中的menu菜单，按照官网写法固定不太好，因为一般项目都是从后端动态获取菜单列表，所以我们需要将官网代码稍作修改，代码如下：
相关学习推荐：javascript教程
注意事项：
【1】菜单高亮部分动态绑定路由跳转的页面
Menu组件中有一个active-name反映的是当前高亮区域，因此可以动态的绑定active-name来实现高亮显示。前提是需要将MenuItem绑定的name也设置成页面路由的name
【2】动态获取菜单数据，需要更新菜单
立即学习“前端免费学习笔记（深入）”；
this.$nextTick(() => { this.$refs.side_menu.updateOpened() this.$refs.side_menu.updateActiveName() });
登录后复制
代码：
export default { data() { return { menuList: [ { name: "首页", to: "home", icon: "ios-archive-outline" }, { name: "关于", to: "about", icon: "ios-create-outline" }, { name: "菜单分类1", icon: "md-person", children: [ { name: "用户", to: "user" } ] }, { name: "菜单分类2", icon: "ios-copy", children: [ { name: "测试", to: "test" } ] } ] }; }, created() { // 数据我先写静态的，可在初始化的时候通过请求，将数据指向menuList。 // ajax成功回调后 this.menuList = response.data; // 别忘记更新菜单 // this.$nextTick(() => { //this.$refs.side_menu.updateOpened() //this.$refs.side_menu.updateActiveName() //}); }};/deep/ .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) { border-right: none; color: #fff; background: #2d8cf0 !important;}
登录后复制
效果图：
相关学习推荐：编程视频
以上就是vue+iview框架实现左侧动态菜单功能的示例的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2726351.html
