选项卡需要动态渲染其中active是当选中后激活选中的样式为图标添加点击删除事件

在状态机配置tabMenu为了动态渲染需要在tabMenu添加active、title、path、id四个属性为了动态渲染组件在mutations里面写addTabMenuData方法在动态添加选项卡时需要判断选项卡是否重复复杂的逻辑不写在mutations中addTabMenuData方法在将就收到的数据push到state里面之前先将state.tabMenu中的active变为false

注意这里将active变为false是因为我们点击菜单就往tabMenu中增加点击的菜单如果不将其改为false则点击下一个菜单上个菜单还是被激活的样式。

addTabMenuData(state,obj){//先遍历tabMenu然后将里面的元素的active属性变为flase然后再pushstate.tabMenu.forEach(itemitem.activefalse)state.tabMenu.push(obj)},5.

在菜单页面添加check点击事件为的是将菜单的名字id地址权限、状态active全部传给mutation里面addTabMenuData的方法

这里需要将active设置为true因为当点击菜单时触发点击后的样式

c1判断菜单是否重复使用find当checkItme里面有元素说明菜单重复

c2:

constcheckItemtabMenu.find(elementelement.titleitem.title)if(checkItem){this.$message({message:

warning});}else{this.$store.commit(addTabMenuData,obj)}

在选项卡组件中根据$store.state.tabMenu拿取数据然后根据数据动态渲染状态机的代码:

importVuefromvue;importVuexfromvuex;import$httpfrom../request/http//挂载插件Vue.use(Vuex)​exportdefaultnewVuex.Store({state:{tabMenu:[//首页默认存在所以保存首页{_id:1,active:true,title:首页,path:/home},]},​mutations:{//mutation保证一个原则尽量不要将业务写到里面//点击菜单后动态往tabmenu数组中增加一个菜单addTabMenuData(state,obj){//先遍历tabMenu然后将里面的元素的active属性变为flase然后再pushstate.tabMenu.forEach(itemitem.activefalse)state.tabMenu.push(obj)},deleteTabMenuData(state,id){constnewTabMenustate.tabMenu.filter(itemitem._id!id)newTabMenu[newTabMenu.length-1].activetruestate.tabMenunewTabMenu}},})

templatedivclassboxulliv-foritem

$store.state.tabMenu:keyitem._id:class{active:item.active}​router-linkv-ifitem.pathclassmenu

:toitem.pathspan{{item.title}}/span/router-link​iclickdeleteTab(item._id)classel-icon-close/i​/li/ul/div/template​scriptexportdefault

{methods:{deleteTab(id){this.$store.commit(deleteTabMenuData,id)consttabMenusthis.$store.state.tabMenuconstlastTabMenutabMenus[tabMenus.length-1];this.$router.push({path:lastTabMenu.path})}}}/script