Perfekte Lösung für vue-router3.0 Version router.push konnte die Seite nicht aktualisieren

Dieses Mal bringe ich Ihnen die perfekte Lösung für die vue-router3.0-Version router.push, die die Seite nicht aktualisieren kann. Die vue-router3.0-Version router.push kann die Seite nicht aktualisieren , wie folgt: Dies ist ein praktischer Fall, schauen wir uns ihn an.

Ich habe das gleiche Problem im Vue-Router auf Github gefunden: Version 3.0.1 kann nicht durch die Router-Instanz springen

Gestern habe ich festgestellt, dass einige

Routen nicht normal springen konnten . Nach der Suche habe ich festgestellt, dass es sich hierbei um Orte handelt, an denen router.push nach der Instanziierung verwendet wird, anstatt this.$router.push direkt zu verwenden. Nach router.push ändert sich die URL, aber die Seite wird nicht aktualisiert. Sie müssen sie manuell aktualisieren, bevor der richtige Bildschirm angezeigt wird.

Ich habe mir das Paket angesehen.

jsonMein Vue und Axios haben die Versionsnummer nicht geschrieben, aber Vue-Router hat die Versionsnummer eindeutig geschrieben, aber nicht jetzt? Was ist los?

Dann habe ich mit npm view vue-router überprüft und festgestellt, dass die von mir verwendete Version nicht mehr die Version in package.json ist, also kam ich zu dem Schluss, dass es vielleicht mein npm-Update vor ein paar Tagen war!

(Aktualisieren Sie in Zukunft nicht einfach so!)

Ich weiß nicht genau, warum die neue Version nicht funktioniert.

Die einfachste Lösung besteht natürlich darin, router.push direkt in this.$router.push zu ändern.

Aber wenn dies möglich ist, warum sollte ich dann in der ersten Komponente eine andere instanziieren? Ort? Was ist mit dem Router?

Natürlich ist es in Ordnung, ein Vue zu instanziieren und dann vue.$router zu verwenden, da dies an manchen Stellen kein Vue ist.

Die Antwort ist natürlich nein, denn dieser Vue und der Vue an

anderen Orten sollten nicht dasselbe Objekt sein.

Dann ist die ultimative Lösung:

Fügen Sie den Router im globalen Vue zum Fenster hinzu und verwenden Sie ihn in main.js:

window.router=router

Und dann den Rest Sie kann problemlos router.push und andere Router-Methoden überall verwenden.

Analysegrund:

Der Router nach der Instanz kann die Seite nicht aktualisieren, wahrscheinlich weil er nicht mit diesem identisch ist.$router im globalen Vue, aber davor Diese Version kann direkt verwendet werden, sie sollte einen Singleton verwenden.

Woher weiß ich das, warum Sie keine Singletons mehr verwenden?

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Route Guards im Angular-Routing

So implementieren Sie die Anmeldung im React-Router mit Validierungskontrolle reagieren

Das obige ist der detaillierte Inhalt vonPerfekte Lösung für vue-router3.0 Version router.push konnte die Seite nicht aktualisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!