Detailed explanation of how to use Vue+element to implement the tag at the top of the page

 addTag: (state, tag) => {
    const { fullPath, path, meta, query } = tag
    if (tag.path === '/login') {
      return false
    }
    const findIndex = state.tags.findIndex(item => item.path === tag.path)
    console.log(findIndex)
    if (findIndex >= 0) {
      state.tags.splice(findIndex, 1, { fullPath, path, meta, query })
    } else {
      state.tags.push({ fullPath, path, meta, query })
    }
  },

computed: {
currentRoute() {
      return this.$route
    },
},
 watch:
    $route: {
      handler(val) {
        if (val.name) {
          this.addTags()
        }
      },
      // Deep observation monitoring deep: true
    }
  },
  methods:{
  addTags() {
  //this.$store.dispatch is first submitted to action, which asynchronously processes the method in the mutation and changes the tags value in the state this.$store.dispatch('user/addTag', this.currentRoute)
    },}

<span v-for="(tag, index) in tags" :key="index" class="tag-span">
        <el-tag
          :closable="isCloseable"
          :effect="setTagColor(tag)"
          @close="closeTags(tag)"
          @click="toTagRoute(tag)"
        >
          {{ tag.meta.title }}
        </el-tag>
      </span>
 methods:{
 setTagColor(tag) {
      return this.currentRoute.path === tag.path ? 'dark' : 'plain'
    },
    }

methods:{
 toTagRoute(tag) {
      this.$router.push({
        path: tag.fullPath || tag.path
      })
    },
}

methods:{
	 closeTags(tag) {
	      console.log(tag, 4444)
	      this.$store.dispatch('user/delTag', tag)
	      this.toLastTagRouter(this.$store.state.user.tags)//Highlight the previous tag to delete
	    },
     toLastTagRouter(tags) {
      //Note that the tags passed in here are deleted, so you cannot use splice==》to change the original array; slice==》does not change the original array and takes the last element of the array const latestView = tags.slice(-1)[0] //The last element of the tags array console.log(latestView)
      if (latestView !== undefined && latestView.path !== undefined) {
        const { fullPath, meta, path, query } = latestView
        this.$router.push({ fullPath, meta, path, query })
      }
    },
}
//action
 delTag({ commit }, tag) {
    commit('delTag', tag)
  },
//mutation
delTag: (state, tag) => {
    //The entries() object becomes a traversable array [0, {name: a, age: '20'}]
    //ForEach and map can also be used here for (const [i, v] of state.tags.entries()) {
      if (v.path === tag.path) {
        state.tags.splice(i, 1)
        break
      }
    }
  },

methods:{
 closeAllTags() {
      // Close all tags, leaving only one this.$store.dispatch('user/delAllTags')
      const { fullPath, meta, path, query } = this.$store.state.user.tags[0]
      // Jump to the remaining tag routes this.$router.push({ fullPath, meta, path, query })
    },
}
//action
delAllTags({ commit }) {
    commit('delAllTags')
  },
//mutation
 delAllTags: (state) => {
    state.tags.splice(1, state.tags.length)
  },