Vue verwendet drei Methoden zum Aktualisieren der Seite

Beim Schreiben von Projekten stoßen wir häufig auf Situationen, in denen der Benutzer eine Aktion ausführt, bestimmte Zustände ändert und die Seite aktualisieren muss, um sie neu darzustellen. Wie zum Beispiel: Benutzeranmeldung erfolgreich, Hinzufügen, Löschen, Aktualisieren usw.

• Ursprüngliche Methode:

Standort.neu laden();

• Vues integrierter Routing-Sprung:

dies.$router.go(0);

Jeder, der es schon einmal verwendet hat, weiß, dass die ersten beiden eine Aktualisierung der Seite erzwingen, was zu einem kurzen Flackern und einer schlechten Benutzererfahrung führt.
Daher wählen wir die dritte Methode:

• Schreiben Sie zunächst den folgenden Code in die App:

<Vorlage>
    <div id="app">
    	<router-view v-if="isRouterAlive"></router-view>
	</div>
</Vorlage>
<Skript>
    Standard exportieren {
        Name: "App",
        provide () { //Stelle Variablen in der übergeordneten Komponente bereit und füge Variablen über „inject“ in die untergeordnete Komponente ein.                                             
            zurückkehren {
                neu laden: this.reload                                              
            }
        },
        Daten() {
            zurückkehren {
                isRouterAlive: true //Variable, die steuert, ob die Ansicht angezeigt wird}
        },
        Methoden: {
            neu laden () {
                this.isRouterAlive = false; //Zuerst schließen,
                dies.$nextTick(Funktion () {
                    this.isRouterAlive = true; //Erneut öffnen}) 
            }
        },
    }
</Skript>

Als Nächstes können wir dies in die Komponente schreiben, die die Seite aktualisieren muss:

Standard exportieren {
    inject:['reload'], //Füge die Reload-Methode in die App-Daten ein () {
        zurückkehren {
    	.......
        }
    },

Verwenden Sie im Codeblock, der die Seite aktualisieren muss:

Damit ist dieser Artikel über die drei Methoden von Vue zum Aktualisieren der Seite abgeschlossen. Weitere relevante Inhalte zur Vue-Aktualisierungsseite 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!