Detaillierte Erklärung zur Verwendung von Vue+Element zum Implementieren des Tags oben auf der Seite

 addTag: (Status, Tag) => {
    const { fullPath, Pfad, Meta, Abfrage } = Tag
    wenn (tag.Pfad === '/login') {
      return false
    }
    const findIndex = state.tags.findIndex(Element => Element.Pfad === tag.Pfad)
    console.log(Index finden)
    wenn (findIndex >= 0) {
      state.tags.splice(findIndex, 1, { vollständigerPfad, Pfad, Meta, Abfrage })
    } anders {
      state.tags.push({vollständigerPfad, Pfad, Meta, Abfrage})
    }
  },

berechnet: {
aktuelleRoute() {
      gib dies zurück.$route
    },
},
 betrachten:
    $route: {
      handler(Wert) {
        wenn (Wert.Name) {
          dies.addTags()
        }
      },
      // Tiefe Beobachtungsüberwachung deep: true
    }
  },
  Methoden:{
  addTags() {
  //this.$store.dispatch wird zuerst an die Aktion gesendet, die die Methode in der Mutation asynchron verarbeitet und den Tag-Wert im Status this.$store.dispatch('user/addTag', this.currentRoute) ändert.
    },}

<span v-for="(tag, index) in tags" :key="index" class="tag-span">
        <el-tag
          :schließbar="istSchließbar"
          :effect="setTagColor(tag)"
          @close="closeTags(tag)"
          @click="toTagRoute(tag)"
        >
          {{ tag.meta.title }}
        </el-tag>
      </span>
 Methoden:{
 setTagColor(tag) {
      gibt this.currentRoute.path === tag.path zurück? „dunkel“: „einfach“
    },
    }

Methoden:{
 toTagRoute(tag) {
      dies.$router.push({
        Pfad: tag.vollständigerPfad || tag.pfad
      })
    },
}

Methoden:{
	 closeTags(tag) {
	      console.log(tag, 4444)
	      dies.$store.dispatch('Benutzer/delTag', tag)
	      this.toLastTagRouter(this.$store.state.user.tags)//Zu löschendes vorheriges Tag markieren
	    },
     toLastTagRouter(tags) {
      //Beachten Sie, dass die hier übergebenen Tags gelöscht werden. Sie können also „splice==》“ nicht verwenden, um das ursprüngliche Array zu ändern. „slice==》“ ändert das ursprüngliche Array nicht und übernimmt das letzte Element des Arrays. const latestView = tags.slice(-1)[0] //Das letzte Element des Tags-Arrays console.log(latestView)
      if (latestView !== undefiniert && latestView.path !== undefiniert) {
        const { fullPath, meta, path, query } = neuesteAnsicht
        this.$router.push({ vollständigerPfad, Meta, Pfad, Abfrage })
      }
    },
}
//Aktion
 delTag({ commit }, tag) {
    commit('delTag', tag)
  },
//Mutation
delTag: (Status, Tag) => {
    //Das entries()-Objekt wird zu einem durchquerbaren Array [0, {name: a, age: '20'}]
    //ForEach und map können hier auch verwendet werden for (const [i, v] of state.tags.entries()) {
      if (v.Pfad === tag.Pfad) {
        Zustand.tags.splice(i, 1)
        brechen
      }
    }
  },

Methoden:{
 schließeAlleTags() {
      // Alle Tags schließen, nur eines übrig lassen this.$store.dispatch('user/delAllTags')
      const { fullPath, meta, path, query } = this.$store.state.user.tags[0]
      // Springe zu den verbleibenden Tag-Routen this.$router.push({ fullPath, meta, path, query })
    },
}
//Aktion
delAllTags({ commit }) {
    commit('AlleTags löschen')
  },
//Mutation
 delAllTags: (Status) => {
    Zustand.tags.splice(1, Zustand.tags.Länge)
  },