Beispielcode zur Implementierung des Verlaufs-Tag-Menüs mit vue+elementui+vuex+sessionStorage

Beispielcode zur Implementierung des Verlaufs-Tag-Menüs mit vue+elementui+vuex+sessionStorage

Im Allgemeinen muss, nachdem sich auf der linken Seite ein Menü befindet, im oberen Teil der Seite ein Verlaufsregisterkartenmenü hinzugefügt werden.
Lernen Sie aus anderen Projekten und kombinieren und passen Sie Online-Funktionen an, um die Schritte der Etikettenimplementierung umzusetzen (grobe Idee):

1. Schreiben Sie eine TagNav-Tag-Komponente

2. Fügen Sie jeder Routing-Komponente in der Routing-Datei das Meta-Attribut meta:{title:'組件中文名'} hinzu

3. Schreiben Sie die Methode zum Hinzufügen/Löschen von Tags in die Datei mutation.js des Stores und aktualisieren Sie die sessionStorage-Daten in der Methode

4. Fügen Sie der Hauptseite Komponenten und der äußeren Ebene der Router-Ansicht Keep-Alive-Komponenten hinzu. In meinem Fall ist main.vue die Hauptseite nach der Anmeldung, und andere Menüseiten basieren auf dem Routing dieser Seite.

5. Schreiben Sie eine Mixins-Datei: beforeRouteLeave-Rückruf, da das Cache-Objekt der Unterseite anscheinend nur in diesem Rückruf gefunden werden kann. Importieren Sie diese Datei in main.js und fügen Sie sie der globalen Methode vue.minxin() hinzu. Dadurch sparen Sie sich das Schreiben von Rückrufen auf jeder Unterseite.

6. Fügen Sie dem linken Menü eine Routenüberwachung hinzu, damit das linke Menü beim Klicken auf das Beschriftungsmenü die entsprechende Menüoption finden und auswählen kann

7. Wenn es sich beim Klicken auf das Tag-Menü um ein Routenumleitungsmenü handelt, müssen Sie einen Routenlistener hinzufügen, um das Routenattribut von meta.title auf der Routenseite abzurufen, die die Umleitung auslöst. Anschließend müssen Sie das Store-Array von Tags im Create-Callback der Seite durchlaufen und meta.title auf den Tag-Namen der aktuellen Umleitung festlegen.

Codebeschreibung starten

Schreiben Sie eine TagNav-Komponente

<style lang="less" scoped>
@import "./base.less";
.tags-nav {
  Anzeige: Flex;
  Elemente ausrichten: strecken;
  Höhe: 40px;
  Polsterung: 2px 0;
  Hintergrundfarbe: @Hintergrundfarbe;
  A {
    Rand rechts: 1px;
    Breite: 24px;
  }
  ein:schweben {
    Farbe: @helle Themenfarbe;
  }
  a:erster-vom-Typ {
    Rand rechts: 4px;
  }
  A,
  .dropdown-btn {
    Anzeige: Inline-Block;
    Breite: 30px;
    Höhe: 36px;
    Farbe: @Titelfarbe;
    Hintergrundfarbe: @weiß;
    Textausrichtung: zentriert;
    Zeilenhöhe: 36px;
    Position: relativ;
    Z-Index: 10;
  }
  .tags-wrapper {
    flex: 1 1 auto;
    Position: relativ;
    .tags-wrapper-scroll {
      Position: absolut;
      oben: 0px;
      links: 0;
      Z-Index: 5;
      Höhe: 36px;
      Überlauf: sichtbar;
      Leerzeichen: Nowrap;
      Übergang: alle 0,3 s sanft ein- und ausfahren;
      .Etikett {
        Flex-Schrumpfen: 0;
        Cursor: Zeiger;
      }
    }
  }
}
</Stil>

<Vorlage>
  <div Klasse="tags-nav">
    <a href="javascript:void(0)" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" @click="handleScroll('left')">
      <icon name="Winkel-links"></icon>
    </a>
    <div Klasse="tags-wrapper" ref="tagsWrapper">
      <div class="tags-wrapper-scroll" ref="tagsWrapperScroll" :style="{ left: leftOffset + 'px' }">
        <Übergangsgruppenname="Folie-Überblendung">
          <el-tag
            Klasse = "Tag Slide-Fade-Item"
            ref="tagsPageOpened"
            v-for="(Tag, Index) in Seiteneröffnungsliste"
            :Schlüssel="'tag_' + index"
            :Typ="tag.selected ? '': 'info'"
            :schließbar="tag.name!='basicDevice'"
            :id="tag.name"
            Effekt="dunkel"
            :text="tag.name"
            @close="closeTag(index, $event, tag.name)"
            @click="tagAusgewähltes(index)"
          >{{tag.title}}</el-tag>
        </Übergangsgruppe>
      </div>
    </div>
    <a href="javascript:void(0)" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" @click="handleScroll('right')">
      <icon name="Winkel-rechts"></icon>
    </a>
    <!-- <el-dropdown class="dropdown-btn" @command="closeTags">
      <span class="el-dropdown-link">
        <icon name="Winkel nach unten"></icon>
      </span>
      <el-dropdown-menu slot="Dropdown">
        <el-dropdown-item command="closeOthers">Andere schließen</el-dropdown-item>
        <el-dropdown-item command="closeAll">Alle schließen</el-dropdown-item>
      </el-Dropdown-Menü>
    </el-dropdown> -->
    <!-- <Dropdown-Platzierung="unten" @on-click="closeTags">
      <a href="javascript:void(0)" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" style="margin-right: 0;">
        <icon name="Winkel nach unten"></icon>
      </a>
      <DropdownMenu slot="Liste">
        <DropdownItem name="closeOthers">Andere schließen</DropdownItem>
        <DropdownItem name="closeAll">Alle schließen</DropdownItem>
      </DropdownMenu>
    </Dropdown> -->
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten () {
    zurückkehren {
      aktuellerSeitenname: this.$route.name,
      linker Offset: 0
    }
  },
  Requisiten: {
    SeiteEröffnetListe: {
      Typ: Array
    }
  },
  Methoden: {
    schließenTags (Aktion) {
      dies.$emit('closeTags', Aktion)
      wenn (Aktion === 'Andere schließen') {
        this.leftOffset = 0
      }
    },
    closeTag (Index, Ereignis, Name) {
      // Entfernen Sie ein einzelnes Tag. Das Tag auf der Startseite kann nicht entfernt werden, wenn (Index !== 0) {
        dies.$emit('closeTags', index,name)
      }
      wenn (dieser.aktuellerSeitenname !== Name) {
        this.leftOffset = Math.min(0, this.leftOffset + event.target.parentNode.offsetWidth)
      }
    },
    tagSelected (Index) {
      dies.$emit('tagSelected', index)
    },
    checkTagIsVisible (Tag) {
      lass sichtbar = {
        ist sichtbar: false,
        Position: 'links'
      }
      const leftDiffValue = tag.offsetLeft + this.leftOffset
      wenn (linkerDiffWert < 0) {
        Rückkehr sichtbar
      }
      const rightDiffValue = this.$refs.tagsWrapper.offsetWidth - this.leftOffset - tag.offsetWidth - tag.offsetLeft
      wenn (linkerDiffWert >= 0 und rechterDiffWert >= 0) {
        sichtbar.istSichtbar = true
      } anders {
        sichtbare Position = "rechts"
      }
      Rückkehr sichtbar
    },
    handleScroll (Richtung) {
      // Holen Sie sich die Tags, die im sichtbaren Bereich kritisch sind
      let criticalTag = this.getCriticalTag(direktion)
      Schalter (Richtung) {
        Fall 'links':
          this.leftOffset = Math.min(this.$refs.tagsWrapper.offsetWidth - criticalTag.$el.offsetLeft, 0)
          brechen
        Fall 'richtig':
          const diffValue1 = -(kritischerTag.$el.offsetLeft + kritischerTag.$el.clientWidth)
          const diffvalue2 = -(this.$refs.tagsWrapperScroll.offsetWidth - this.$refs.tagsWrapper.offsetWidth)
          this.leftOffset = Math.max(Diffwert1, Diffwert2)
          brechen
        Standard:
          brechen
      }
    },
    getCriticalTag (Richtung) {
      kritischenTag lassen
      const refsTagList = this.$refs.tagsPageOpened
      für (let-Tag von refsTagList) {
        // Prüfen, ob sich das Tag im sichtbaren Bereich befindet if (this.checkTagIsVisible(tag.$el).isVisible) {
          criticalTag = Tag
          wenn (Richtung === 'links') {
            brechen
          }
        }
      }
      kritischenTag zurückgeben
    },
    setTagsWrapperScrollPosition (Tag) {
      const sichtbar = this.checkTagIsVisible(Tag)
      if (!visible.isVisible && sichtbar.position === 'links') {
        // Das Label befindet sich auf der linken Seite des sichtbaren Bereichs this.leftOffset = -tag.offsetLeft
      } anders {
        // Das Tag befindet sich auf der rechten Seite des sichtbaren Bereichs oder sichtbaren Bereichs this.leftOffset = Math.min(0, -(tag.offsetWidth + tag.offsetLeft - this.$refs.tagsWrapper.offsetWidth + 4))
      }
    }
  },
  montiert () {
    // Initialisiere die Tag-Position der aktuell geöffneten Seite const refsTag = this.$refs.tagsPageOpened
    setzeTimeout(() => {
      für (const tag von refsTag) {
        wenn (tag.text === diese.$route.name) {
          const tagNode = tag.$el
          this.setTagsWrapperScrollPosition(tagNode)
          brechen
        }
      }
    }, 1)
  },
  betrachten:
    $route (nach) {
      this.currentPageName = bis.name
      dies.$nextTick(() => {
        const refsTag = this.$refs.tagsPageOpened
        für (const tag von refsTag) {
          wenn (tag.text === diese.$route.name) {
            const tagNode = tag.$el
            this.setTagsWrapperScrollPosition(tagNode)
            brechen
          }
        }
      })
    }
  }
}
</Skript>

Und je weniger Dateien im selben Verzeichnis

//Farbe
@theme1-Farbe: #515a6e;
@Themenfarbe: #2d8cf0;
@helle Themenfarbe: #5cadff;
@dunkles Design-Farbe: #2b85e4;
@info-Farbe: #2db7f5;
@Erfolgsfarbe: #19be6b;
@Warnfarbe: #ff9900;
@Fehlerfarbe: #ed4014;
@Titelfarbe: #17233d;
@Inhaltsfarbe: #515a6e;
@Unterfarbe: #808695;
@deaktivierte Farbe: #c5c8ce;
@Randfarbe: #dcdee2;
@Teilerfarbe: #e8eaec;
@Hintergrundfarbe: #f8f8f9;
@weiß: weiß;

// Abstand @padding: 16px;

//Standardstil* {
  Box-Größe: Rahmenbox;
}

A {
  Farbe: @Theme-Farbe;
}

ein:schweben {
  Farbe: @helle Themenfarbe;
}

.dunkel-a {
  Farbe: @Titelfarbe;
}

// Float löschen
.clear-float::nach {
  Anzeige: Block;
  klar: beides;
  Inhalt: "";
  Sichtbarkeit: versteckt;
  Höhe: 0;
}

// animation.slide-fade-item {
  Übergang: alle 0,1 s Ein- und Ausstieg;
  Anzeige: Inline-Block;
}
.schieben-ausblenden-eingeben, .schieben-ausblenden-verlassen-zu
/* .list-complete-leave-active für Versionen unter 2.1.8 */ {
  Deckkraft: 0;
  transformieren: übersetzenX(-10px);
}

// Bildlaufleistenstil.menu-scrollbar::-webkit-scrollbar,
.common-scrollbar::-webkit-scrollbar {
  /*Allgemeiner Bildlaufleistenstil*/
  Breite: 11px;
  /*Höhe und Breite entsprechen jeweils der Größe der horizontalen und vertikalen Bildlaufleisten*/
  Höhe: 1px;
}

// Bildlaufleistenstil 1
.menu-scrollbar::-webkit-scrollbar-thumb {
  /*Kleines Quadrat innerhalb der Bildlaufleiste*/
  Rahmenradius: 2px;
  Box-Shadow: Einschub 0 0 5px rgba(0, 0, 0, 0,2);
  Hintergrund: @Unterfarbe;
}

// Bildlaufleistenstil 2
.common-scrollbar::-webkit-scrollbar-thumb {
  /*Kleines Quadrat innerhalb der Bildlaufleiste*/
  Rahmenradius: 2px;
  Box-Shadow: Einschub 0 0 5px rgba(0, 0, 0, 0,2);
  Hintergrund: @border-color;
}

-----------Hinweis: Da durch das Schließen aller und anderer Funktionen lediglich das TagNav-Tag gelöscht wird und dies nichts mit der Route zu tun hat, kann das gelöschte Seitenrouten-Verlassensereignis nicht abgerufen werden. Sie können daher nur zuerst diese beiden Funktionen schließen.------------

Fügen Sie jeder Route in der Datei route.js Metaattribute hinzu

{
        Pfad: 'auditManage',
        Name: "auditManage",
        meta:{title:'Audit-Management'},
        Komponente: Funktion (Auflösen) {
          erfordern(['../page/sysConfig/audit/auditManageMain.vue'], auflösen);
        },
        Umleitung: '/main/auditManage/trendStatistics',
        Kinder: [{
          Pfad: 'trendStatistics',
          Name: 'trendStatistics',
          meta:{title:'Trend-Audit'},
          Komponente: Funktion (Auflösen) {
            erfordern(['../page/sysConfig/audit/auditTrendStatisticsList.vue'], auflösen);
          }
        }, {
          Pfad: "Suche",
          Name: "Suche",
          meta:{title:'Audit-Abfrage'},
          Komponente: Funktion (Auflösen) {
            erfordern(['../page/sysConfig/audit/auditSearchList.vue'], auflösen);
          }
        },

------Beschreibung: Dies ist das Routing-Fragment, das den Inhaltssatz für den Meta-Attributmodus sowie die Routing-Umleitung enthält -------

Schreiben Sie den Tag zum Hinzufügen/Löschen und Aktualisieren der SessionStorage-Methode in die mutation.js des Stores.

[setPageOpenedList](Zustand,Parameter = null){
        // Lesen Sie die lokal gespeicherten offenen Listendaten, bevor Sie state.pageOpenedList = sessionStorage.pageOpenedList festlegen
      ? JSON.parse(sessionStorage.pageOpenedList) : [{
        Titel: 'Infrastruktur',
        Name: "basicDevice",
        ausgewählt: true
      }]
    wenn (!params) {
      zurückkehren
    }
    wenn (params.index === -1) {
      // Neue Seite öffnen state.pageOpenedList.push({
        Titel: params.route.meta.title,
        Name: Parameter.Route.Name,
        ausgewählt: false
      })
      params.index = status.Seiteneröffnungsliste.Länge - 1
    }
    // Ausgewählten Wert aktualisieren für (let i = 0; i < state.pageOpenedList.length; i++) {
      wenn (params.index === i) {
        status.pageOpenedList[i].selected = true
      } anders {
        state.pageOpenedList[i].selected = false
      }
    }
    // Aktualisieren Sie die lokalen Daten der neu geöffneten Seitenliste sessionStorage.pageOpenedList = JSON.stringify(state.pageOpenedList)
    },
    // PageOpenedList entfernen
    [removePageOpenedList] (Status, Parameter = null) {
        wenn (!params) {
          zurückkehren
        }
        wenn (Typ von Parametern.Aktion === 'Zahl') {
          Zustand.SeiteGeöffneteListe.splice(params.action, 1)
        } anders {
        //Hier eingeben, um alle Tabs zu löschen und einen ursprünglich ausgewählten Tab zuzuweisen
          Status.pageOpenedList = [{
            Titel: 'Infrastruktur',
            Name: "basicDevice",
            ausgewählt: true
          }]
          //Wenn Sie andere löschen, fügen Sie die Registerkarte unter der aktuellen Route hinzu
          wenn (params.action === 'closeOthers' && params.route.name !== 'basicDevice') {
            state.pageOpenedList[0].selected = false
            Status.SeiteEröffnetListe.push({
              Titel: params.route.meta.title,
              Name: Parameter.Route.Name,
              ausgewählt: true
            })
          }
        }
        // Aktualisieren Sie die lokalen Daten der neu geöffneten Seitenliste sessionStorage.pageOpenedList = JSON.stringify(state.pageOpenedList)
      },

------Hinweis: Da die Methode zum Schreiben in den Store in einigen Projekten unterschiedlich ist, sind [setPageOpenedList] und [removePageOpenedList] hier Konstanten, die in mutation-type.js definiert sind---------

Fügen Sie Tag-Komponenten, Keep-Alive-Komponenten und Methoden zur Komponentenauswahl/-löschung auf der Hauptseite main.vue hinzu, überwachen Sie Routenänderungen und berechnen Sie die gespeicherte Tag-Liste

<div Klasse="a-tag">
            <tag-nav :pageOpenedList="pageOpenedList" ref="tagNavRef" @closeTags="Tags schließen"
                     @tagSelected="tagSelected"></tag-nav>
          </div>
          <div Klasse="a-Produkt">
            <div Klasse="wird geladen" Stil="Höhe:100%">
              <am Leben bleiben: max="5">
                <Router-Ansicht></Router-Ansicht>
              </am Leben erhalten>
            </div>
          </div>

// Navigations-Tag-Methode closeTags (action,elId) {
        lass isRemoveSelected;

        if (typeof action === 'number') { //Ein einzelnes let entfernen elEvent = new Event('click');
          document.getElementById(elId).dispatchEvent(elEvent);
          //Entferne standardmäßig das aktuelle Tag, unabhängig davon, ob es das aktuelle Tag für (let i = 0; i < this.$store.state.pageOpenedList.length; i++) { ist.
            wenn (Aktion === i) {
              this.$store.state.pageOpenedList[i].selected = true
            } anders {
              this.$store.state.pageOpenedList[i].selected = false
            }
          }

          //Und es ist die aktuelle Registerkarte isRemoveSelected = this.$store.state.pageOpenedList[action].selected

        }
        dies.$store.commit('removePageOpenedList', { route: dies.$route, Aktion })
        if (istAusgewähltesEntfernen) {
          // Entfernen Sie ein einzelnes Tag und navigieren Sie zur Seite des letzten Tags this.$router.push({
            Name: this.$store.state.pageOpenedList[this.$store.state.pageOpenedList.length - 1].name
          })
        } sonst wenn (Aktion === 'Alles schließen') {
          dies.$router.push('/main/basicDevice');
        }
      },
      tagSelected (Index) {
        wenn (this.$store.state.pageOpenedList[index].name !== this.$route.name) {
          dies.$router.push({
            Name: this.$store.state.pageOpenedList[index].name
          })
        }
      },

 berechnet: {
      Seite geöffnete Liste () {
        gib dies zurück.$store.getters.getPageOpenedList
      },
    },

betrachten:
      $route (nach) {
        // Routenänderungen, PageOpenedList aktualisieren
        let index = this.$util.indexOfCurrentPageOpened(to.name, this.$store.state.pageOpenedList)
        dies.$store.commit('setPageOpenedList', { route: zu, index })
      },
   }   

// Suchen Sie die neu geöffnete Seite in pageOpenedList indexOfCurrentPageOpened(name, pageOpenedList) {
    für (let index = 0; index < pageOpenedList.length; index++) {
      wenn (pageOpenedList[index].name === name) {
        Rückgabeindex
      }
    }
    Rückgabe -1
  },

------Hinweis: Ich werde den Komponentenimport hier nicht veröffentlichen. Das Cache-Limit beträgt höchstens 5 Tags, aus Angst, dass das Öffnen zu vieler Tags dazu führt, dass der Browserspeicher explodiert und einfriert. ---------

Schreiben Sie eine Mixins-Datei: Route, Leave-Callback und mischen Sie sie global in main.js.

/**
 * Für das Menü der Registerkarte „Verlauf“ */
Standard exportieren {
  
    vorRouteAbfahren(nach, von, weiter) {
        console.log("mixins-beforeRouteLeave:",von);
        let-Flag = true
        this.$store.state.pageOpenedList.forEach(e => { // pageOpenedList speichert die Komponentenweiterleitung der geöffneten Tabs if(from.name == e.name) {
            Flagge = falsch
          }
        }) 
        wenn(flag && dies.$vnode.parent && dies.$vnode.parent.componentInstance.cache) {
        // let key = this.$vnode.key // Aktuell geschlossener Komponentenname var key = (this.$vnode.key == null || this.$vnode.key == undefined) ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '') : this.$vnode.key;
          let cache = this.$vnode.parent.componentInstance.cache // Zwischengespeicherte Komponente let keys = this.$vnode.parent.componentInstance.keys // Name der zwischengespeicherten Komponente if (cache[key] != null) {
            Cache löschen[Schlüssel]
            let index = Schlüssel.indexOf(Schlüssel)
            wenn(index > -1) {
              Schlüssel.spleißen(Index, 1)
            }
          }
        }
        nächste()
      }
  }

//Führen Sie die gemischte Methode import beforeLeave von './mixins/beforeLeave' ein.
Vue.mixin(vorVerlassen)

------Beschreibung: Der Hauptzweck besteht hier darin, diese Exit-Methode auf jeder Routenseite zurückzurufen und zu bestimmen, ob die aktuell beendete Route zu einem anderen Registerkartenmenü wechseln oder die aktuelle Menüregisterkarte schließen soll. Wenn sie geschlossen ist, löschen Sie den entsprechenden Cache---------

Das linke Menü muss auch einen Routenlistener hinzufügen, damit das linke Menü beim Wechseln des Tag-Menüs korrekt springen und das Tag auswählen kann

 handleSelect(index,indexPfad){
            dies.aktiv = Index;
        },

betrachten:{
        $route (nach) {
            Konsole.log("Akkordeon==============",zu,zu.Pfad);
            //Wenn die if-Anweisung anzeigt, dass die Adresse umgeleitet wird, verwenden Sie den übergeordneten Umleitungsmenüpfad zum Springen und lassen Sie die übergeordnete Seite sich selbst umleiten, wenn (to.matched && to.matched[to.matched.length-1].parent.redirect != undefined) {
                this.handleSelect(zu.übereinstimmend[zu.übereinstimmend.Länge-1].übergeordneter.Pfad,null);
            }anders {
                dies.handleSelect(zu.Pfad,null);
            }
        }
    },

-----Beschreibung: Die erste Methode wird ausgelöst, wenn el-menu ein Menü auswählt, und der übereinstimmende Attributwert wird abgerufen, wenn die Route beobachtet wird, um zu beurteilen------

Wenn es sich bei der umgeschalteten Bezeichnung um ein umgeleitetes Routing-Menü handelt, müssen Sie beim Initialisieren der umgeleiteten Seite die Titeleinstellung abrufen, die der Radiobezeichnung des Bezeichnungsarrays entspricht (die Umleitungsseiten meines Projekts werden grundsätzlich per Radio umgeschaltet). Wenn es nach dem Umschalten zwischengespeichert wird, müssen Sie den Titel von der Route abrufen.

<div Klasse="tabsBox">
          <el-radio-group class="radioStyle" v-for="Element in Menüs" :key="item.route" v-model="activeName" @change="checkItem(item.route)">
            <el-radio-button :label="item.text" @blur.native="goPath(item.route)"></el-radio-button>
          </el-radio-gruppe>
        </div>

Daten(){
      zurückkehren {
        activeName:'Teilnehmer',
        Menüs:[
          {route:"partyManageReport",text:"Teilnehmer"},
          {route:"staffManageReport",text:"Mitarbeiter"},
          {route:"partyAccountManageReport",text:"Hauptkonto"},
          {route:"partyAccountGroupManageReport",text:"Hauptkontogruppe"},
          {route:"partySubAccountManageReport",text:"Vom Konto (Web-Assets)"},
          {route:"partySubAccountManageD",text:"Von Konto (Infrastruktur)"}
          ]
      }
    },
    betrachten:{
        $route (nach) {
            this.activeName = zu.meta.title;
        }
    },
 erstellt(){
      dies.$store.state.pageOpenedList.forEach((item)=>{
          wenn(Element.ausgewählt){
          this.activeName = Artikeltitel;
          }
      })
     }

Zusammenfassung: Da der Methode zum Schließen des Tags ein Klickereignis hinzugefügt wird, legen Sie es beim Schließen anderer Tags als aktuelles Tag fest und schließen Sie es, sodass die dem geschlossenen Tag entsprechende Route abgerufen werden kann, um den Cache über den verlassenden Rückruf zu leeren. Dies führt jedoch dazu, dass die aktuell ausgewählte Registerkarte nach dem Schließen anderer Registerkarten zur letzten Registerkarte springt. Wenn Ihre Ansprüche nicht zu hoch sind, kann dies gerade noch akzeptabel sein. Aber es fühlt sich nicht so gut an. Gibt es eine gute Möglichkeit, andere Tabs zu schließen und gleichzeitig den entsprechenden Cache des aktuell ausgewählten Tabs zu leeren, ohne zu anderen Tab-Optionen zu springen? Ich suche nach Optimierungsideen.

Außerdem weiß ich nicht, wie ich den Cache geschlossener Tabs beim Schließen aller und anderer Optionen leeren kann. Wie oben erwähnt, kann ich die Methode zum Auslösen des Verlassens der Route beim Schließen nicht erreichen, sondern einfach das Tab-Array zurücksetzen.

Verlaufsmenü-Tags

Das erste ist ein Basis-Tag, daher wird die Schaltfläche „Schließen“ entfernt.

Dies ist das Ende dieses Artikels über den Beispielcode zur Implementierung des Verlaufsregisterkartenmenüs mit vue+elementui+vuex+sessionStorage. Weitere relevante Inhalte zum Verlaufsregisterkartenmenü von Vue finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Vue.js verwendet Element-ui, um das Navigationsmenü zu implementieren
  • Vue verwendet Element-UI, um die Menünavigation zu implementieren
  • Vue+Element UI realisiert die Kapselung von Dropdown-Menüs
  • Vue+element-ui fügt ein Beispiel für eine benutzerdefinierte Rechtsklick-Menümethode hinzu
  • Vue + Element UI implementiert den Menüfunktionsimplementierungscode des Berechtigungsverwaltungssystems

<<:  Formel und Berechnungsmethode zur Schätzung der Server-Parallelität

>>:  Implementierung der Vorschaufunktion mehrerer Bild-Uploads auf HTML-Basis

Artikel empfehlen

Einfache Zusammenfassung der Methoden zur Leistungsoptimierung von Tomcat

Tomcat selbst optimieren Tomcat-Speicheroptimieru...

So konfigurieren Sie eine VMware-Umgebung mit mehreren Knoten

Dieses Tutorial verwendet CentOS 7 64-Bit. Weisen...

So verwenden Sie den Tencent-Schieberegler-Verifizierungscode im Vue3+Vue-cli4-Projekt

Einführung: Im Vergleich zu herkömmlichen Bildver...

Das KTL-Tool realisiert die Methode zum Synchronisieren von Daten von MySQL zu MySQL

Verwenden Sie das KTL-Tool, um Daten von MySQL zu...

Eine detaillierte Einführung in den netstat-Befehl in Linux

Inhaltsverzeichnis 1. Einleitung 2. Beschreibung ...

Detaillierte Erklärung der Wertübertragung zwischen übergeordneten und untergeordneten Komponenten in Vue3

Seit der Geburt von vue3 ist viel Zeit vergangen ...

Detaillierte Schritte zur Installation von Harbor, einem privaten Docker-Repository

Die Installation von Harbor ist ziemlich einfach,...

Detaillierte Erklärung, wann Javascript-Skripte ausgeführt werden

JavaScript-Skripte können überall in HTML eingebe...

Verschachtelte Anzeigeimplementierung der Vue-Router-Ansicht

Inhaltsverzeichnis 1. Routing-Konfiguration 2. Vu...

Detaillierte Schritte zur Implementierung der Excel-Importfunktion in Vue

1. Front-End-geführte Implementierungsschritte De...

Installieren Sie Kafka unter Linux

Inhaltsverzeichnis 1.1 Java-Umgebung als Vorausse...

Auszeichnungssprache - Titel

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...

Zwei Verwendungen von iFrame-Tags in HTML

Ich habe kürzlich an einem Projekt gearbeitet – B...

Entwurf und Implementierung eines Supermarkt-Warenwirtschaftssystems auf Basis von Mysql+JavaSwing

Inhaltsverzeichnis 1. Funktionseinführung 2. Schl...

Detaillierte Erläuterung der Implementierung und Anwendungsszenarien des Vue-Filters

1. Kurze Einführung Vue.js ermöglicht es Ihnen, I...