浙江省建设培训中心网站首页网络营销软文范例300
动态渲染选项卡
其中router-link是为了当点击选项卡时跳转到选项卡所在的列表
选项卡需要动态渲染，其中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(item=>item.active=false)state.tabMenu.push(obj)},5. 在菜单页面添加check点击事件，为的是将菜单的名字，id，地址，权限、状态（active）全部传给mutation里面addTabMenuData的方法
注意
这里需要将active设置为true，因为当点击菜单时，触发点击后的样式
c1：判断菜单是否重复，使用find，当checkItme里面有元素说明菜单重复
c2: 通过commit给addTabMenuData传参
constcheckItem=tabMenu.find(element=>element.title==item.title)if(checkItem){this.$message({message: `${item.title}已经被选择了`,type: 'warning'});}else{this.$store.commit('addTabMenuData',obj)}6. 在选项卡组件中根据$store.state.tabMenu拿取数据，然后根据数据动态渲染
状态机的代码:
importVuefrom'vue';importVuexfrom'vuex';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(item=>item.active=false)state.tabMenu.push(obj)},deleteTabMenuData(state,id){constnewTabMenu=state.tabMenu.filter(item=>item._id!=id)newTabMenu[newTabMenu.length-1].active=truestate.tabMenu=newTabMenu}},})
选项卡的代码：
<template><divclass="box"><ul><liv-for="item in $store.state.tabMenu":key="item._id":class="{active:item.active}"><router-linkv-if="item.path"class="menu" :to="item.path"><span>{{item.title}}</span></router-link><i@click="deleteTab(item._id)"class="el-icon-close"></i></li></ul></div></template><script>exportdefault {methods:{deleteTab(id){this.$store.commit('deleteTabMenuData',id)consttabMenus=this.$store.state.tabMenuconstlastTabMenu=tabMenus[tabMenus.length-1];this.$router.push({path:lastTabMenu.path})}}}</script>