vue+elementUI实现tab路由切换

vue+实现tab路由切换

这个tab其实实现很久了,已经在我好几个项目中使用了，很早之前就想记录下来的，一直拖拖拖到现在emmmm…

最开始写这个tab的时候去看了很多篇实现tab的文章，先后也试了很多他们写的，因为项目框架的不同，总是有大大小小的问题，推翻重做了多次，依旧没能实现。最后还是自己一点一点理解后堆出来了。（原本觉得很难，理解后发现并没有那么难，所以不管做什么，理解真的很重要！！！）

实现效果：

直接上代码！

1.实现tab组件

.vue

<template><div class="app-wrap"><!-- 此处放置el-tabs代码 --><div class="template-tabs"><el-tabsv-model="editableTabsValue"type="card"closable@tab-click="tabClick"@tab-remove="removeTab"><el-tab-panev-for="(item, index) in editableTabs":key="item.name":label="item.title":name="item.name"></el-tab-pane></el-tabs></div></div>
</template><script>export default {name: "TabComponent",data(){return{}},methods: {//点击切换tabtabClick(tab){let path = tab.name;this.$store.commit('setTabName', path);this.$router.push({path: path});},//点击移除tabremoveTab(targetName){if(targetName === "/home"){return;}let tabs;tabs = typeof this.editableTabs ==='string'? JSON.parse(this