最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue+iview菜单与页签的联动方式代码示例
时间：2022-06-29 02:19:26 编辑：袖梨 来源：一聚教程网
本篇文章小编给大家分享一下vue+iview菜单与页签的联动方式代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。
一、使用iview的menu和tab做布局，将这两个组件放到主页面
由于menu与tab的数据相同且样式需要进行关联，因此可以使用vuex进行状态管理，state中写入需要管理的数据和状态变量，在mutations中设置操作的动作，actions中监听一些行为（我的菜单没有展开收缩部分，因此并没有使用到actions）
二、做好布局之后要对菜单增加点击事件
on-select，首先在mutations中注册tab的改变事件，当左侧菜单点击的时候查看tab中是否已经有这个页签并设置isExist=false，如果存在，isExist修改为true，没有的话给tab对应遍历的数组增加菜单相对索引的数据。
mutationsType中
mutations中：
menu组件中的事件为：
在tab组件中首先设置页面默认路由：
再将事件加入进去：
iview+Vue多级菜单的联动
用最笨的方式写了一个三级菜单的联动
相关文章
- 差差漫画免费在线看弹窗入口-差差漫画免费在线看弹窗 02-04
- 怎样买u卖u？国内还能买u卖u的平台有哪些？ 02-04
- 咔哔漫画App下载安装最新版-哔咔漫画仲夏版官网入口安卓下载 02-04
- 哔咔漫画资源全集下载:海量人气日漫韩漫实时同步更新 02-04
- 游咔下载-游咔正版app安卓最新版 02-04
- 免费看短视频的精品app-零门槛做视频人的必备app 02-04