最近在使用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() });
代码：
<template> <p class="leftnav"> <menu ref="side_menu" theme="dark" accordion v-for="(menuitem, menuindex) in menulist" :key="menuindex" :active-name="$route.name"> <!-- 展开没有子菜单 --> <menuitem v-if="!menuitem.children || menuitem.children.length==0" :key="menuindex" :name="menuitem.to" :to="menuitem.to"> <icon :type="menuitem.icon" /> <span>{{ menuitem.name }}</span> </menuitem> <!-- 展开有子菜单 --> <submenu v-else :name="menuindex"> <template slot="title"> <icon :type="menuitem.icon" /> <span>{{menuitem.name}}</span> </template> <menuitem v-for="(item, index) in menuitem.children" :key="index" :name="item.to" :to="item.to">{{item.name}}</menuitem> </submenu> </menu> </p> </template><script>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() //}); }};</script><style lang="scss" scoped>/deep/ .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) { border-right: none; color: #fff; background: #2d8cf0 !important;}</style>
效果图：
相关学习推荐：编程视频
以上就是vue+iview框架实现左侧动态菜单功能的示例的详细内容。