最近在使用vue+iview开发一个后台管理类的系统,希望做一个点击左侧菜单右侧的页签与内容都能相对应的改变。但搞了好久的路由也没有实现这个功能。刚开始使用vue+iview不知道iview-admin可以直接拿来使用,布局之类的开箱即用,可是自己的demo已经写了好久不忍心放弃。

一、使用iview的menu和tab做布局,将这两个组件放到主页面

由于menu与tab的数据相同且样式需要进行关联,因此可以使用vuex进行状态管理,state中写入需要管理的数据和状态变量,在mutations中设置操作的动作,actions中监听一些行为(我的菜单没有展开收缩部分,因此并没有使用到actions)

vue+iview的菜单与页签的联动

vue+iview的菜单与页签的联动

二、做好布局之后要对菜单增加点击事件:on-select,首先在mutations中注册tab的改变事件,当左侧菜单点击的时候查看tab中是否已经有这个页签并设置isExist=false,如果存在,isExist修改为true,没有的话给tab对应遍历的数组增加菜单相对索引的数据。

mutationsType中

vue+iview的菜单与页签的联动

mutations中:

vue+iview的菜单与页签的联动

menu组件中的事件为:

vue+iview的菜单与页签的联动

在tab组件中首先设置页面默认路由:

vue+iview的菜单与页签的联动

再将事件加入进去:

vue+iview的菜单与页签的联动


相关文章:

  • 2021-11-29
  • 2022-12-23
  • 2021-11-28
  • 2022-02-05
  • 2022-12-23
  • 2021-09-17
  • 2021-11-17
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-12-31
  • 2022-12-23
  • 2022-12-23
  • 2021-08-24
  • 2022-01-04
  • 2022-12-23
相关资源
相似解决方案