smart-admin/rc-busness/components/tabs.vue

<template>
 <div class="crumbs" v-if="showTab">
 <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to=item.path   v-for="(item, index) in titleLists"
        :key="index">{{ item.meta.title }}</el-breadcrumb-item>
  <!-- <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>商品分类</el-breadcrumb-item> -->
</el-breadcrumb>
   
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
    data() {
    return {
      title: "",
      path: "",
      titleLists: [
       {
             path: '/',
    name: 'index',
    meta:{
      title: '首页',
 
    }
       }

      ],
      showTab: true,
      isShow: true,
    };
  },


    watch: {
    $route() {
      this.setTitle();
    },
  },
  mounted() {
    this.setTitle(); 
  },

  methods: {
    ...mapMutations(["changemessage",'selectMenu']),
       setTitle() {
              console.log(this.$route.matched);
              console.log(this.titleLists);
                    let userinfo=[]
   

 let saveUserInfo={
    path:'admin',
   name:'1',
   meta:'b341181c-aced-11e9-89bf-00163e0e8daf',

 }
   userinfo.push(this.$route.matched);
   let list=[];
   console.log(userinfo);
   userinfo.map(item=>{
      console.log(item);
      list=item;
   })
 console.log(list);
 let anlist={
    path:'admin',
   name:'1',
   meta:'b341181c-aced-11e9-89bf-00163e0e8daf',
 }
   list.forEach(element=>{
     console.log(element);
     anlist=element
   })
                 for(let i in list){
                   saveUserInfo.path=list[i].path;
                      saveUserInfo.name=list[i].name;
                      saveUserInfo.meta=list[i].meta;
                   }
                        console.log(saveUserInfo);
                // store.commit('se', current.name);
               this.selectMenu({ data: saveUserInfo });
      console.log(this.$store.state.tabsList);
      this.titleLists=this.$store.state.tabsList;
      // console.log(userlisa);
      console.log(this.titleLists);
    },
  },
  // created(){
  //  let user=this.$store.state.tabsList;
  //    this.tags=user;
  //    console.log(this.tags);
  //   console.log(user);
  //    console.log(this.$store.state.tabsList)
  // },
  
  // mounted(){
 
  // }

};
</script>

<style lang="less" scoped>
.crumbs{
  width: 93%;
  margin: 0 auto;
  display: flex;
  height: 40px;
  align-items: center;
  margin-top: 70px;
}
.tags-scroll-content {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 43px;
  z-index: 0;
  overflow: hidden;
  // padding: 0 66px 0 21px;
}
.tabs {
   user-select: none;
  z-index: 20;
  width: 100%;

  height: 43px;
  top: 60px;
  height: 42px;
  background: white;
  .tag {
    display: inline-block;
    height: 43px;
    // position: absolute;
    padding-right: 40px;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
  .tags-scroll-content > i {
    height: 40px;
    line-height: 40px;
    background: white;
    cursor: pointer;
    z-index: 1;
    font-size: 16px;
  }
  .el-icon-arrow-left {
    position: absolute;
    left: 0;
    width: 21px;
    box-shadow: 0px 1px 8px 0px rgba(70, 70, 70, 0.32);
  }
  .el-icon-arrow-right {
    position: absolute;
    right: 40px;
    width: 21px;
  }
  .close {
    position: absolute;
    right: 0;
    top: 0;
    color: black;
    background: white;
    height: 40px;
    padding-left: 15px;
    line-height: 40px;
    width: 40px;
    border-left: 1px solid #f1f1f1 !important;
    font-size: 16px;
    cursor: pointer;
  }
 .el-tag--dark {
    background: white;
    em {
      display: inline-block;
      vertical-align: middle;
      height: 5px;
      margin-right: 7px;
      width: 5px;
      border-radius: 50%;
      background-color: #85ef47 !important;
      box-shadow: 0 0 7px #b7eb8f;
    }
  }
 .el-tag--dark {
    color: #323233 !important;
    .el-icon-close {
      color: black !important;
    }
  }
 .el-tag {
      .el-icon-close {
        font-size: 16px;
        &:hover {
          color: red !important;
          background: white !important;
        }
        display: inline-block;
      
    }
    // width: 140px;
    em {
      display: inline-block;
      vertical-align: middle;
      height: 5px;
      margin-right: 7px;
      width: 5px;
      border-radius: 50%;
      background-color: white;
    }
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    text-align: center;
    padding: 0;
    color: #969799;
    font-size: 13px;
    float: left;
    border-radius: 0;
    border: 0;
    > span {
      display: inline-block;
      vertical-align: middle;
    }
    i {
      display: inline-block;
      vertical-align: middle;
      top: 0px;
      
    }
    .el-tag__close {
      right: 0px;
      color: #777777;
      &:hover {
        color: white;
      }
    }
    .el-xie{
      list-style: none;
      font-style: normal;
      margin: 0 8px;
    }
  }
}
</style>