elementUI中 面包屑 搭配 Tag标签

效果：

一、面包屑

面包屑由点击左侧一级或二级菜单而添加到顶部的

对于有无子级菜单的处理

computed: {

        //没有子菜单

        notChildrenData() {

                return this.menuData.filter(item => !item.children)

        },

        //有子菜单

         hasChildren() {

                return this.menuData.filter(item => item.children)

        }

} 

点击后需要触发commit调用mutations修改state

 handleMenu(item) {
      if(this.$route.path !== item.path && !(this.$route.path === "/home" && (item.path ==='/'))) {
        this.$router.push(item.path);
      }
      this.$store.commit('selectMenu',item);
 },

在vuex模块管理下tabs.js模块中更新面包屑数据

export default {
    state:{
        // 面包屑
        tabList:[
          {
            path: "/",
            name: "home",
            label: "首页",
            icon: "s-home",
            url: "Home/Home",
          },
        ]
     },
    mutations:{
          //修改state
          selectMenu(state, val) {
          // 判断添加的数据是否为首页
          if (val.name !== 'home') {
            const index = state.tabList.findIndex(item => item.name === val.name);
            // 如果不存在
            if (index === -1) {
              state.tabList.push(val);
            }
          }
        },
    }
}

使用： 面包屑是封装的组件在Header.vue组件中的

<template>  
<!-- 面包屑 -->
   <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="item in tags"
          :key="item.path"
          :to="{ path: item.path }"
          >{{ item.label }}</el-breadcrumb-item>
   </el-breadcrumb>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed:{
      ...mapState({
      tags: state => state.Tab.tabList,
    }),
 }
}
</script>
<style lang="less" scoped>
    /deep/ .el-breadcrumb__item {
      .el-breadcrumb__inner {
        font-weight: normal;
        &.is-link {
          color: #666;
        }
      }
      &:last-child {
        .el-breadcrumb__inner {
          color: #fff;
        }
      }
    }
</style>

二、 Tag功能

components下新建组件commonTag.vue(注意路由配置当中添加name属性没)

<template>
  <div class="tabs">
    <el-tag size="small" type="success"
      v-for="(item,index) in tags"
      :key="item.path"
      :closable="item.name !== 'home'"
      :effect="$route.name === item.name ? 'dark' : 'plain'"
      @click="changeMenu(item)"
      @close="handleClose(item,index)">
      {{ item.label }}
    </el-tag>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
    data() {
        return {

        }
    },
    computed:{
        ...mapState({
            tags: state => state.Tab.tabList
        })
    },
    methods:{
        ...mapMutations(['closeTag']),
        changeMenu(item) {
            this.$router.push({ name: item.name})
        },
        //关闭 Tag 时触发的事件(其实就是删除tabList中的数据则需要在mutations中操作)
        handleClose(item,index) {
            // 调用store中的mutation
            this.closeTag(item)
            let length = this.tags.length
            // 删除tag后的页面跳转
            if (item.name !== this.$route.name) {
                return
            }
            // 表示删除的是最后一项
            if (index === length) {
                this.$router.push({
                    name: this.tags[index - 1].name
                })
            } else {
                this.$router.push({
                    name : this.tags[index].name
                })
            }
        }
    }
};
</script>

<style lang="less" scoped>
.tabs {
    padding:20px;
    .el-tag {
        margin-right: 15px;
        cursor: pointer;
    }
}
</style>

删除需要在mutations中操作

export default {
    namespace:true,
    state:{
      // 面包屑
      tabList:[
       {
          path: "/",
          name: "home",
          label: "首页",
          icon: "s-home",
          url: "Home/Home",
       },
     ]
    },
    mutations:{
       //删除指定的tag数据
      closeTag(state,item) {
          const idx = state.tabList.findIndex(v => v.name === item.name);
          state.tabList.splice(idx, 1);
        }
    }  
}