vue+elementUI实现tab路由切换

最新推荐文章于 2024-08-12 11:44:39 发布

建一座城，容一个人

最新推荐文章于 2024-08-12 11:44:39 发布

阅读量8.5k

点赞数 10

分类专栏： vue 前端 elementUI 文章标签： vue.js 前端 tab

本文链接：https://blog.csdn.net/weixin_43409850/article/details/105868120

版权

本文通过示例代码介绍了如何在Vue.js项目中结合ElementUI库，实现Tab组件与路由切换的功能。涉及组件TabComponent.vue以及store模块的相关配置，包括index.js, auth.js和getter.js。" 116811811,8753399,DCMTK OFStandard ASCII/Double转换测试,"['DCMTK', '医学图像处理', 'C++', '数据转换']

摘要由CSDN通过智能技术生成

vue+elementUI实现tab路由切换

这个tab其实实现很久了,已经在我好几个项目中使用了，很早之前就想记录下来的，一直拖拖拖到现在emmmm…
最开始写这个tab的时候去看了很多篇实现tab的文章，先后也试了很多他们写的，因为项目框架的不同，总是有大大小小的问题，推翻重做了多次，依旧没能实现。最后还是自己一点一点理解后堆出来了。（原本觉得很难，理解后发现并没有那么难，所以不管做什么，理解真的很重要！！！）
实现效果：
在这里插入图片描述

直接上代码！
1.实现tab组件

TabComponent.vue

<template>
  <div class="app-wrap">
    <!-- 此处放置el-tabs代码 -->
    <div class="template-tabs">
      <el-tabs
        v-model="editableTabsValue"
        type="card"
        closable
        @tab-click="tabClick"
        @tab-remove="removeTab">
        <el-tab-pane
          v-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: {
   
     //点击切换tab
      tabClick(tab){
   
        let path = tab.name;
        this.$store.commit('setTabName', path);
        this.$router.push({
   path: path});
      },
      //点击移除tab
      removeTab(targetName){
   
        if(targetName === "/home"){
   
          return;
        }
        let tabs;
        tabs = typeof this.editableTabs ==='string'? JSON.parse(this.editableTabs):this.editableTabs;

        let activeName = this.editableTabsValue;