Vue+Ant Design 实现 tags标签选中高亮，跳转路由，删除最后一个路由跳转至前一个，删除非最后一个路由跳转至后一个

注意点：

        1.要完成高亮效果在<a-tag>组件上 直接判断当前的$route上的路由与遍历时item的路由是否相等即可

        2.跳转路由时要判断是否为最后一个，所以要根据数组的长度以及点击时所在的下标来判断

        3.将整个<a-tag>分装成一个公共组件方便调用

<template>
  <div>
    <a-tag :color="$route.path === t.path? '#2db7f5':'#87d068'" v-for="(t,index) in tagsList" :key="t.path"
           :closable="t.label !== '首页'"
           @close="closeHandle(t,index)" @click="handleChange(t)">{{ t.label }}
    </a-tag>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: '',
  data() {
    return {};
  },
  created() {

  },
  mounted() {
  },
  components: {},
  computed: {
    ...mapState('t', ['tagsList']),
  },
  methods: {
    closeHandle(val, index) {
      const t_index = this.tagsList.findIndex((item) =>
          item.path === val.path
      )
      this.tagsList.splice(t_index, 1)

      const length = this.tagsList.length
      if (this.$route.path !== val.path) {
        return
      }
      if (index === length) {
        const path_one = this.tagsList[index - 1].path
        this.$router.push(path_one)
      } else {
        const path_two = this.tagsList[index].path
        this.$router.push(path_two)
      }
    },
    handleChange(val) {
      if (this.$route.path !== val.path && !(this.$route.path === '/home' && val.path === '/')) {
        this.$router.push(val.path)
      }

    },
  }
}
</script>

<style scoped lang="less">
.ant-tag {
  font-size: 16px;
  padding: 4px;
}
</style>