Gründe und Lösungen für die mehrfache Ausführung der Überwachungsmethode, wenn Vue Routenänderungen überwacht

Ich bin ein Front-End-Neuling und habe mich der kontinuierlichen Produktionsverwaltung von Back-End-Bugs verschrieben und nutze dies als Selbstmotivation. Ich habe in den letzten Tagen eine Anfrage erhalten und im Internet nach vielen Beispielen gesucht, aber das Problem wurde nicht grundlegend gelöst. Ich werde meinen eigenen Lösungsprozess hier aufzeichnen. Dies ist auch das erste Mal, dass ich in den Nuggets spreche, also seien Sie bitte nachsichtig.

Anforderungsbeschreibung:

Es gibt zwei Seiten, A und B. Die Bestell-ID von Seite A muss über Routing-Parameter an Seite B übergeben werden, um eine Datenassoziationsabfrage durchzuführen, und dann auf Seite B angezeigt werden.

Anforderungsanalyse:

Wenn Sie diese Anforderung erfüllen, sollte es für Sie einfach sein, sich vorzustellen, die Routenänderungen auf Seite B zu beobachten und dann die Parameter zum Ausführen der Methode zum Abfragen der Daten abzurufen.

Bedürfnisse lösen

Auf Seite A:

const route = {
        Name: 'BpageName',
        Parameter: { Bestell-ID: this.tableData[index].id },
        Meta: {
          Titel: „Seite B“
        }
      }
dies.$router.push(route)

Drücken Sie eine Route, um Seite B erneut zu öffnen

Anschließend übernimmt Seite B die Routing-Parameter:

@Watch('$route.params.packageId')
routeParamsChanged(newParams: any, oldParams: any) :void { // Parameter erneut kopieren, indem Änderungen an übergebenen Parametern überwacht werden, if (newParams) {
      dies.getList(newParams)
    }
}

Sieht es nicht einfach aus?

Das Problem besteht jedoch darin, dass Seite B über einen Keep-Alive-Seitencache verfügt und daher die Methode routeParamsChanged nur einmal ausgeführt wird, wenn die Route zum ersten Mal gewechselt wird, wodurch der erwartete Effekt erzielt wird. Wenn Sie jedoch Seite B schließen oder von Seite A zu Seite B springen, ohne Seite B zu schließen, wird die Methode routeParamsChanged zweimal oder öfter ausgelöst.
Nach Überprüfung zahlreicher Informationen werden die Gründe für diese Situation anhand des Problems des wiederholten Auslösens von Funktionen in der Vue-Projektüberwachung erklärt.

Lösung 1: Bestimmen Sie, ob fullPath Seite A ist

if (this.$route.fullPath === 'Ein Seitenroutingpfad') {
    // etwas tun
}

Ich habe es mit Begeisterung ausprobiert.

@Watch('$route')
routeParamsChanged(newParams: any, oldParams: any) :void { // Parameter erneut kopieren, indem die Änderungen in den übergebenen Parametern überwacht werden, if (newParams === '/Apage') {
      dies.getList(newParams)
    }
}

Das Ergebnis funktioniert immer noch nicht, die Methode routeParamsChanged wird immer noch zweimal oder öfter ausgeführt. Lösung 2: Fügen Sie einen Flag-Parameter hinzu, um zu bestimmen, ob sich die Seite im aktiven Zustand befindet. Komponenten, die Keep-Alive-Cache verwenden, lösen nur aktivierte und deaktivierte Ereignisse aus. Setzen Sie das Flag daher auf „true“ und „false“, wenn diese beiden Ereignisse ausgelöst werden. GetList() wird nur ausgeführt, wenn das Flag „true“ ist.

private aktivierte Flagge: boolean = false
aktiviert () {
    this.activatedFlag = wahr;
}

deaktiviert () {
    this.activatedFlag = falsch;
}
@Watch('$route')
routeParamsChanged(newParams: any, oldParams: any) :void { // Parameter erneut kopieren, indem Änderungen an übergebenen Parametern überwacht werden, if (newParams && this.activatedFlag) {
      dies.getList(newParams)
    }
}

Wurde dies dieses Mal behoben? Das Ergebnis funktioniert immer noch nicht, die Methode routeParamsChanged wird immer noch zweimal oder öfter ausgeführt. Stürzt ab...

Problemlösung

Basierend auf der obigen Lösung 2 können wir schließlich die Methode zum Abrufen von Parametern implementieren und die Methode zum Abrufen von Daten in der aktivierten ()-Lebenszyklus-Hook-Funktion aufrufen. Wir müssen nicht auf die Änderungen in der Route achten. Wir können die Daten einfach abrufen, indem wir this.$route.params.orderId abrufen.

private aktivierte Flagge: boolean = false
aktiviert () {
    this.activatedFlag = wahr
    wenn (this.$route.params.orderId && this.activatedFlag) {
      dies.getList(diese.$route.params.orderId)
    }
}

deaktiviert () {
    this.activatedFlag = falsch;
}

Es ist vollbracht, endlich gelöst. Liebe Experten, bitte kommentieren Sie den Code. Wenn Sie bessere Meinungen oder Vorschläge haben, hinterlassen Sie bitte Kommentare und geben Sie Anleitung.

Oben finden Sie ausführliche Informationen zu den Gründen und Lösungen, warum die Überwachungsmethode mehrfach ausgeführt wird, wenn Vue Routenänderungen überwacht. Weitere Informationen zu den Gründen und Lösungen, warum die Vue-Überwachungsmethode mehrfach ausgeführt wird, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!