前端后台管理系统标签栏，多标签操作实现方法

页面实现效果如图：

代码如下：

    // 重新加载
    handleRefresh() {
      window.location.reload()
    },
    // 关闭左侧标签项
    closeLeftTags() {
      let newTags = []
      const currentIndex = this.visitedViews.findIndex(
        (i) => i === this.selectedTag
      )
      newTags = this.visitedViews.slice(currentIndex, this.visitedViews.length)
      this.$store.dispatch('tagsView/delAllViews')
      for (let i = 0; i < newTags.length; i++) {
        if (newTags[i].name || newTags[i].path) {
          this.$store.dispatch('tagsView/addView', newTags[i])
        }
      }
    },
    // 关闭右侧标签项
    closeRightTags() {
      let newTags = []
      const currentIndex = this.visitedViews.findIndex(
        (i) => i === this.selectedTag
      )
      newTags = this.visitedViews.slice(0, currentIndex + 1)
      this.$store.dispatch('tagsView/delAllViews')
      for (let i = 0; i < newTags.length; i++) {
        if (newTags[i].name || newTags[i].path) {
          this.$store.dispatch('tagsView/addView', newTags[i])
        }
      }
    },
    // 关闭当前选中项
    closeSelectedTag(view) {
      this.$store
        .dispatch('tagsView/delView', view)
        .then(({ visitedViews }) => {
          if (this.isActive(view)) {
            this.toLastView(visitedViews, view)
          }
        })
    },
    // 关闭其他标签项
    closeOthersTags() {
      this.$router.push(this.selectedTag)
      this.$store
        .dispatch('tagsView/delOthersViews', this.selectedTag)
        .then(() => {
          this.moveToCurrentTag()
        })
    },
    // 关闭全部标签项
    closeAllTags(view) {
      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
        if (this.affixTags.some((tag) => tag.path === view.path)) {
          return
        }
        this.toLastView(visitedViews, view)
      })
    },
    toLastView(visitedViews, view) {
      const latestView = visitedViews.slice(-1)[0]
      if (latestView) {
        this.$router.push(latestView.fullPath)
      } else {
        // now the default is to redirect to the home page if there is no tags-view,
        // you can adjust it according to your needs.
        this.$router.push('/')
        this.addTags()
      }
    },