引言

Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！
即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！

先创建一个标签

创建vue页面 Tabs.vue，内容如下：

<template><div><el-tabs v-model="editableTabsValue" type="card" closable><el-tab-pane:key="item.name"v-for="item in editableTabs":label="item.title":name="item.name"></el-tab-pane></el-tabs></div></template><script>export default {name: "Tabs.vue",data() {return {editableTabsValue: '1',editableTabs: [{title: '首页',name: '1',content: '首页'},{title: 'Tab 1',name: '2',content: 'Tab 1 content'},{title: 'Tab 2',name: '3',content: 'Tab 2 content'}],tabIndex: 1}}}
</script><style scoped></style>

在Index.vue页面的路由锚点 router-view 上方引入此页面

页面效果

点击菜单打开新的标签页

将标签数据作为全局使用

将数据放到store.js中，作为全局

const state ={username: '明世隐',userState:0,menu_data:[],isLoadRoute:false,editableTabsValue: '1',editableTabs: [{title: '首页',name: '首页',content: '首页'},{title: 'Tab 1',name: '2',content: 'Tab 1 content'},{title: 'Tab 2',name: '3',content: 'Tab 2 content'}]
}

Tabs.vue中的这两个数据editableTabsValue和editableTabs就从store中获取

注意：
如果你的在data中这样写，可能会无法正常显示，建议用computed 方式来写。

<script>export default {name: "Tabs.vue",data() {return {}},computed:{editableTabsValue:{get(){return this.$store.state.editableTabsValue;},set(val){this.$store.state.editableTabsValue=val;}},editableTabs:{get(){return this.$store.state.editableTabs;},set(val){this.$store.state.editableTabs=val;}}}}
</script>

效果是一样的

菜单点击增加标签页

在storejs中将写死的数据editableTabs 内容删除，只剩下首页的那条

editableTabs: [{title: '首页',name: '1',content: '首页'}
]

在mutations添加 editableTabs 数据变更的方法 addEditableTabs

因为我定义的菜单数据的时候，没有title属性，所以这里我都用title来代表

addEditableTabs(state,tab){state.editableTabs.push({title: tab.name,name: tab.name})state.editableTabsValue = tab.name
}

在给菜单增加点事件

在methods 加入方法，提交菜单表更消息到storejs即可。

selectMenu(item){this.$store.commit("addEditableTabs",item);
}

效果图

处理重复标签

就目前的情况，再次点击菜单页，会重复创建新的标签页

在addEditableTabs 中判断，如果数据中已经有了，则不重复添加，只需切换即可

addEditableTabs(state,tab){//根据tab.name 查询 editableTabs 是否已经存在let idx = state.editableTabs.findIndex(item=>item.name===tab.name)if(idx===-1){//不存在则可以添加state.editableTabs.push({title: tab.name,name: tab.name})}state.editableTabsValue = tab.name
}

效果：

关闭标签页

标签页添加关闭事件
编写关闭代码

removeTab(targetName) {let tabs = this.editableTabs;let activeName = this.editableTabsValue;if (activeName === targetName) {tabs.forEach((tab, index) => {if (tab.name === targetName) {let nextTab = tabs[index + 1] || tabs[index - 1];if (nextTab) {activeName = nextTab.name;}}});}this.editableTabsValue = activeName;this.editableTabs = tabs.filter(tab => tab.name !== targetName);
}

效果图：

点击标签页操作

点击标签页选中菜单

给el-menu 设置属性 default-active

:default-active=“this.$store.state.editableTabsValue”

将我原来代码el-menu-item的index设置为"item.name"

:index=“item.name”

加入路由跳转代码

因原来菜单点击，会根据index属性来跳转，index原来是path（路由地址），现在index属性更改为name了，则跳转不会生效，修改原来的router.js的代码，动态创建路由加入name属性（name:item.name），方便跳转（之前写代码的时候忘记加）。

let oRouters = router.options.routes;
const buildRouter = ()=>{let data = store.state.menu_data;data.forEach(item=>{let new_router = {path:item.path,name:item.name,component:() => import('./components/'+item.component+'.vue')}oRouters[0].children.push(new_router);})router.addRoutes(oRouters)
}

在刚才编写的selectMenu房子中，加入路由跳转代码（根据name跳转），仅需一行代码即可。

selectMenu(item){//点击菜单跳转路由this.$router.push({name:item.name})this.$store.commit("addEditableTabs",item);
}

这样就可以实现点击标签页，菜单跟着高亮显示了

点击标签页路由也要跳转

从上图不难发现，点击标签页，标签页下方的页面没有跟着跳转，这也不是我们希望看到的

在Tabs页面的el-tabs 添加tab-click事件

添加方法，利用路由的name来跳转

clickTab(target){this.$router.push({name:target.name})
}

效果

关闭的两个bug

关闭菜单后，菜单对应的路由没有跟着跳转

仅需在关闭标签的方法removeTab，最后加上以下代码

this.$router.push({name:activeName})

首页不允许关闭

在关闭标签的方法removeTab ，执行关闭之前，加入以下代码

if(targetName=='首页'){return ;
}

完整removeTab 代码

removeTab(targetName) {let tabs = this.editableTabs;let activeName = this.editableTabsValue;if(targetName=='首页'){return ;}if (activeName === targetName) {tabs.forEach((tab, index) => {if (tab.name === targetName) {let nextTab = tabs[index + 1] || tabs[index - 1];if (nextTab) {activeName = nextTab.name;}}});}this.editableTabsValue = activeName;this.editableTabs = tabs.filter(tab => tab.name !== targetName);this.$router.push({name:activeName})
}

小结

这节总结了“ 创建标签页 ”，希望能对大家有所帮助，请各位小伙伴帮忙【点赞】+【收藏】+ 【评论区打卡】，如果有兴趣跟小明哥一起学习Java和前端的，【关注一波】不迷路哦。
请到文章下方帮忙【一键三连】谢谢哈！

Vue开发实例（16）之创建标签页

引言

导航

先创建一个标签

点击菜单打开新的标签页

将标签数据作为全局使用

菜单点击增加标签页

处理重复标签

关闭标签页

点击标签页操作

点击标签页选中菜单

点击标签页路由也要跳转

关闭的两个bug

小结

导航

热门专栏推荐

Vue开发实例（16）之创建标签页相关推荐

最新文章

热门文章