Lösungen für Probleme bei der Verwendung von addRoutes in Vue-Projekten

Vorwort

Offizielle Einführung von AddRoutes:

Funktionssignatur:

router.addRoutes(routes: Array<Routenkonfiguration>)

Fügen Sie dynamisch weitere Routingregeln hinzu. Das Argument muss ein Array sein, das der Routenoption entspricht.

Als ich diese zwei Tage am Berechtigungsverwaltungssystem des Vue-Backends arbeitete, stellte ich fest, dass nach dem Hinzufügen von Routen mit dem von Vue bereitgestellten AddRoute zwei Fehler auftraten. Mal sehen, wie man sie löst~

1. 404 Seite

1. Ursachen

Nach dem Hinzufügen des dynamischen Routings mithilfe der von vue bereitgestellten addRoutes befindet sich die Routing-Einstellung für die 404-Seite nicht mehr am Ende des Routings

2. Lösung

Fügen Sie die Route für die 404-Seite am Ende der dynamischen Route hinzu

Der Code lautet wie folgt (Beispiel):

// xxx => dynamisches Routen-Array, über das der Benutzer verfügt xxx.push({ path: '*', redirect: '/404', hidden: true })

// Routing-Konfiguration dynamisch hinzufügen router.addRoutes(xxx)

2. Aktualisieren Sie den weißen Bildschirm

1. Ursache

Das dynamische Routing wird beim Aktualisieren nicht vollständig geladen

2. Lösung

Nachdem die Route hinzugefügt wurde, rufen Sie die Seite auf

Der Code lautet wie folgt (Beispiel):

if (das dynamische Routing des Benutzers ist nicht geladen) {
	//Beheben Sie den Fehler mit dem weißen Bildschirm, der beim Aktualisieren auftritt
  nächste({
    …to, // Der Zweck von next({ …to }) besteht darin, sicherzustellen, dass die Route vor dem Aufrufen der Seite hinzugefügt wird (was als erneutes Aufrufen verstanden werden kann).
    replace: true // Einmal erneut eingeben, keinen doppelten Verlauf behalten})
} anders {
	nächste()
}

3. Routing-Duplikate

1. Ursache

Die Routeneinstellungen werden über router.addRoutes(xxx) hinzugefügt. Beim Abmelden werden sie nicht gelöscht. Beim erneuten Anmelden werden sie wieder hinzugefügt, es entstehen also Duplikate.

2. Lösung

Der Code lautet wie folgt (Beispiel):

// Setzt die Route zurück Exportfunktion resetRouter() {
  const neuerRouter = createRouter()
  router.matcher = newRouter.matcher // Den passenden Pfad der Route zurücksetzen}

Diese Methode instanziiert die Route neu, was dem Anlegen einer neuen Route gleichkommt. Die zuvor hinzugefügte Route existiert nicht mehr. Sie müssen diese nur beim Abmelden aufrufen.

Zusammenfassen

Dies ist das Ende dieses Artikels zur Problemlösung bei der Verwendung von addRoutes in Vue-Projekten. Weitere Informationen zur Verwendung von addRoutes in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!