"这篇文章主要展示了如何使用Vue.js和iView框架构建一个动态的左侧菜单功能。作者通过具体的代码示例,讲解了如何处理从后端动态获取的菜单数据,并实现菜单项的高亮以及根据路由自动切换高亮状态。" 在Vue.js与iView结合的项目开发中,创建动态左侧菜单是常见的需求。iView提供了一个强大的Menu组件,用于构建各种类型的菜单。然而,简单的官方示例可能无法满足从后端动态获取菜单数据并根据当前路由自动高亮显示的需求。以下是如何实现这一功能的关键点: 1. 动态绑定路由与菜单高亮: Menu组件的`active-name`属性用于标识当前激活的菜单项。为了使菜单高亮跟随路由变化,我们需要将`active-name`动态绑定到当前路由的名称。同时,每个MenuItem的`name`属性也需要设置为对应页面路由的`name`,这样当路由改变时,`active-name`匹配到的菜单项就会自动高亮。 2. 动态获取和更新菜单数据: 在数据从后端获取后,可能需要更新Menu组件的状态以反映新的菜单结构。这可以通过`$nextTick`函数来确保DOM更新后再执行,调用`this.$refs.side_menu.updateOpened()`和`this.$refs.side_menu.updateActiveName()`方法来更新已展开的子菜单和当前活跃的菜单项。 以下是一个基于上述原则的Vue模板代码示例: ```html <template> <div 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> </div> </template> ``` 在这个模板中,我们使用`v-for`遍历`menuList`(假设这是从后端获取的菜单数据),然后根据`menuItem`是否有子菜单决定是渲染MenuItem还是Submenu。同时,我们使用`$route.name`动态绑定`active-name`,并确保每个MenuItem的`name`属性与路由的`name`属性匹配。 通过这样的方式,你可以创建一个能够根据路由变化自适应的动态左侧菜单,同时实现菜单项的高亮效果,提高用户体验。这个方案适用于大多数需要从后端动态加载菜单的Vue+iView项目。
![](https://csdnimg.cn/release/download_crawler_static/12924847/bg1.jpg)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 3
- 资源: 889
我的内容管理 收起
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
会员权益专享
最新资源
- 电力电子系统建模与控制入门
- SQL数据库基础入门:发展历程与关键概念
- DC/DC变换器动态建模与控制方法解析
- 市***专有云IaaS服务:云主机与数据库解决方案
- 紫鸟数据魔方:跨境电商选品神器,助力爆款打造
- 电力电子技术:DC-DC变换器动态模型与控制
- 视觉与实用并重:跨境电商产品开发的六重价值策略
- VB.NET三层架构下的数据库应用程序开发
- 跨境电商产品开发:关键词策略与用户痛点挖掘
- VC-MFC数据库编程技巧与实现
- 亚马逊新品开发策略:选品与市场研究
- 数据库基础知识:从数据到Visual FoxPro应用
- 计算机专业实习经验与项目总结
- Sparkle家族轻量级加密与哈希:提升IoT设备数据安全性
- SQL数据库期末考试精选题与答案解析
- H3C规模数据融合:技术探讨与应用案例解析
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)