技術標籤：vue.js

一、首先建一個vuex倉庫，去存放路由和標籤值

const tagsview = {
  state: {
    visitedviews: [
      {
        name: "welcome",
        path: "/welcome",
        title: "歡迎頁"
      }
    ], //存放所有瀏覽過的且不重複的路由資料
  },
  mutations: { //這
    ADD_VISITED_VIEWS: (state, view) => { //開啟新頁籤--新增路由資料的方法
      if (state.visitedviews.some(v => v.path == view.path)) return;

      state.visitedviews.push({
        name: view.name,
        path: view.path,
        title: view.meta.name2 || 'no-title'
      })
    },
    DEL_VISITED_VIEWS: (state, view) => { //關閉頁籤--刪除路由資料的方法

      for (let [i, v] of state.visitedviews.entries()) {
        if (v.path == view.path) {
          state.visitedviews.splice(i, 1)
          break
        }
      }
    },
    DEL_ALL_VIEWS: (state) => {
      state.visitedviews = []
    }
  },
  actions: { //呼叫這裡去觸發mutations，如何呼叫？在元件內使用this.$store.dispatch('action中對應名字', 引數)
    addVisitedViews({
                      commit
                    }, view) { //通過解構賦值得到commit方法
      commit('ADD_VISITED_VIEWS', view) //去觸發ADD_VISITED_VIEWS，並傳入引數
    },
    delVisitedViews({
                      commit,
                      state
                    }, view) { //刪除陣列存放的路由之後，需要再去重新整理路由，這是一個非同步的過程，需要有回掉函式，所以使用並返回promise物件，也可以讓元件在呼叫的時候接著使用.then的方法
      //commit('DEL_VISITED_VIEWS',view)
      return new Promise((resolve) => { //resolve方法：未來成功後回掉的方法
        commit('DEL_VISITED_VIEWS', view);
        resolve([...state.visitedviews]);
      })
    },
    delAllViews({ commit, state }) {
      return new Promise((resolve) => {
        commit('DEL_ALL_VIEWS')
        resolve([...state.visitedviews])
      })
    }
  }
}

export default tagsview
 

二、搞一個元件，去放tab標籤

<template id="">
  <div class="tags-view-container" v-show='visitedViews.length>=0' style="overflow: hidden;">
    <el-tabs class="tabViewClass" v-model="editableTabsValue" type="card" @tab-click="goRouterLink" @tab-remove="delSelectTag" :closable="closableB" style="width: 97%;
      border-top: 1px solid #E4E7ED;float: left;">
      <el-tab-pane
        :key="tag.path"
        v-for="tag in Array.from(visitedViews)"
        :label="tag.title"
        :name="tag.path"
      >
      </el-tab-pane>
    </el-tabs>
    <div style="width: 3%;height:40px;border-top: 1px solid #E4E7ED;border-bottom: 1px solid #E4E7ED;float: left;text-align: center;">
      <i class="el-icon-delete" style="margin-top: 13px;" @click="closeAllTags"></i>
    </div>
  </div>
</template>
<script>

  export default {
    data() {
      return {
        editableTabsValue: '/',
        closableB: false
      }
    },
    computed: {
      visitedViews() {
        //store中取值
        console.log(this.$store.state.tagsview.visitedviews)
        return this.$store.state.tagsview.visitedviews;
      }
    },
    methods: {
      goRouterLink(tab, event) {
        console.log(tab)
        console.log(event)
        this.$router.push({ path: tab.name })
      },
      handleTabsEdit(targetName, action) {
        console.log(targetName)
        console.log(action)
      },
      closeAllTags() {
        let This = this
        console.log('關閉所有路由')
        this.$store.dispatch('delAllViews')
        this.$router.push('/welcome')
        let obj = {
          name: "welcome",
          path: "/welcome",
          title: "歡迎頁"
        }
        This.$store.state.tagsview.visitedviews.push(obj)
      },
      isActive(route) {
        return route.path == this.$route.path;
      },
      addViewTags() {
        let This = this
        //路由改變時執行的方法
        if (this.$route.name) {
          const route = this.$route;
          console.log(route,'看路由')
          this.$store.dispatch("addVisitedViews", route);
          this.editableTabsValue = this.$route.path
          if(This.$store.state.tagsview.visitedviews.length == 1 && This.$store.state.tagsview.visitedviews[0].path == '/welcome'){
            This.closableB = false
          }else{
            This.closableB = true
          }
        }
      },
      delSelectTag(routePath) {
        let This = this
        let route = this.$store.state.tagsview.visitedviews.filter(item => item.path == routePath)[0]
        //先提交刪除資料的方法,陣列刪除出掉資料後，如果關閉的是當前開啟的路由需要將路由改為陣列最後一次push進去的路由
        this.$store.dispatch("delVisitedViews", route).then(views => {
          if (this.isActive(route)) {
            //只有在關閉當前開啟的標籤頁才會有影響
            let lastView = views.slice(-1)[0]; //選取路由陣列中的最後一位
            if (lastView) {
              this.$router.push(lastView);
              if(This.$store.state.tagsview.visitedviews.length == 1 && This.$store.state.tagsview.visitedviews[0].path == '/welcome'){
                This.closableB = false
              }else{
                This.closableB = true
              }
            } else {
              this.$router.push("/");
              This.closableB = false
            }
            This.editableTabsValue = route.path
            console.log(This.closableB)
          }else{
            console.log(This.$store.state.tagsview.visitedviews)
            if(This.$store.state.tagsview.visitedviews.length == 1 && This.$store.state.tagsview.visitedviews[0].path == '/welcome'){
                This.closableB = false
              }else{
                This.closableB = true
              }
          }
        });
      }
    },
    watch: {
      $route() {
        this.addViewTags();
      }
    }
  };

</script>


<style scoped>
  .tags-view-wrap {
    /*background: #efeef0;*/
    position: absolute;
    top: 8px;
    left: 0px;
    width: 100%;
    height: 32px;
    overflow: hidden;
  }

  .tags-view-wrap .tags-view-item {
    height: 30px;
    line-height: 30px;
    display: inline-block;
    /*color: #fff;*/
    /*background-color: #409EFF;*/
    background-color: #dcdfe6;
    color: #606266;
    border: 1px solid #dcdfe6;
    padding: 0 8px;
    border-radius: 5px;
    margin: 0 3px;
    /*position: relative;*/
  }

  .tags-view-wrap .tags-view-item:hover {
    /*color: rgb(221, 247, 5);*/
  }

  .tags-view-wrap .active {
    /*color: rgb(221, 247, 5);*/
    /* background: #409EFF; */
    background: red;
    color: #fff;
  }
  .tags-view-wrap .circleClose{
    color: #606266;
    cursor: pointer;
  }
  .tags-view-wrap .circleClose:hover{
    color: #ccc;
  }
</style>
 

三、將封裝好的標籤放到頁面相應的位置上

四、大致效果