Vue-Router erlaubt keine Navigation zum aktuellen Standort (/Pfad) Fehlerursachen und -behebungen

Fehlermeldung

Die Navigation zum aktuellen Standort ("/Pfad") ist nicht erlaubt

Ursache

Wenn die Konsole die obige Meldung anzeigt Navigating to current location ("/path") is not allowed , liegt dies daran, dass dieselbe Route wiederholt eingegeben wurde.

Fehlerdemonstration

Um den Fehler zu demonstrieren, wurde ein neues Projekt mit vue-cli neu erstellt und lediglich ein按鈕und eine input geschrieben.
Code:

<!-- Vue-Vorlagencode -->
<div>
	<button @click="gotoHandle">Routensprung testen</button>
	<input v-model="Routenname">
<div>

// Routing-Code Export Standard {
  Daten() {
    zurückkehren {
      Routenname: ''
    }
  },
  Methoden: {
    gehe zuHandle() {
      dies.$router.push({name: this.routeName})
    }
  }
}

Animierte Demo

Wenn Sie dieselbe Route wiederholt eingeben (sei es über den Pfad oder den Routennamen), werden Sie darauf hingewiesen, dass die Navigation zum aktuellen Standort ( path ) nicht zulässig ist. Im obigen Beispiel lautet die Eingabeaufforderung beispielsweise bei der Eingabe der Route mit dem Namen About path: "/about" und die Navigation zum aktuellen Standort ("/about") ist nicht zulässig. Dies liegt daran, dass bei einer falschen Sprungmethode die Fehlerbehandlung nicht erfasst wird und die Fehlerinformationen daher direkt ausgegeben werden.

Problemumgehung

Methode 1

Fügen Sie .catch(error => error) direkt an der Stelle hinzu, wo der Fehler gemeldet wird

Standard exportieren {
  Daten() {
    zurückkehren {
      Routenname: ''
    }
  },
  Methoden: {
    gehe zuHandle() {
      dies.$router.push({name: this.routeName}).catch(Fehler => Fehler)
    }
  }
}

Methode 2

Fügen Sie der Methode, die zum Fehler springt, eine globale Fehlererfassung hinzu.

VueRouter von „vue-router“ importieren

const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = Funktion (Standort) {
  returniere routerPush.call(diesen, Standort).catch(Fehler => Fehler)
}

Der obige Code ist derselbe, wenn er in main.js oder router/index.js sowie vor und nach new VueRouter ausgeführt wird. Da es sich um ein push -Ereignis beim zurückgesetzten VueRouter Prototypobjekt handelt, wird push -Ereignis des Prototypobjekts eine Erfassungsausnahme hinzugefügt, sodass alle zugehörigen Objekte über die Prototypkette geändert werden.

Der Duplikatssprungfehler der replace ähnelt dem oben genannten. Ändern Sie einfach push replace .

Methode 3

Diese Methode wird empfohlen. Es empfiehlt sich, die Sprunglogik zu optimieren, um wiederholte Sprünge zur gleichen Route zu vermeiden.

Dies ist das Ende dieses Artikels über die Fehlerursache und -behebung, wenn Vue-Router keine Navigation zum aktuellen Standort (/Pfad) zulässt. Weitere verwandte Inhalte zur Navigation zum aktuellen Standort über Vue-Router 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!