Warum solltest du Vue-Router in deinem Vue-Projekt verwenden?
Vue-Router bietet dir eine großartige Möglichkeit, deine Frontend-Routen zu definieren und zu organisieren, was vor allem dann hilfreich ist, wenn du eine Single Page Application (SPA) erstellen willst.
Doch als Caleb Porzio darüber twitterte, wie man den Vue-Router in einer Single File Component registriert (Tweet: https: //goo.gl/qYo35p), öffnete er mir die Augen! Denk mal drüber nach! Du kannst Komponenten erstellen und die komponentenspezifischen Routen in ihnen definieren, was sie auch verschachtelbar macht, wenn du untergeordnete Komponenten hast (mit etwas mehr Arbeit, aber dazu später mehr).
Alle Routen im Einstiegspunkt deiner App zu definieren, hat mich davon abgehalten, Vue-Router überhaupt zu benutzen. Warum? Stell dir vor, du musst 50 Routen und die dazugehörigen Komponenten in einer einzigen Datei definieren. Das wird schnell schwer zu pflegen sein. Aber mit unserem Wissen über komponentengesteuerte Routen können wir die Routen isoliert in unseren Komponenten speichern und sie sogar wiederverwenden, damit unsere App trocken bleibt - ich bin begeistert!
Ich fing an, mit diesem Ansatz herumzuspielen, stellte aber bald fest, dass die Verschachtelung dieser Router-Komponenten nicht wie erwartet funktioniert. Wenn du einfach mehrere Vue-Router-Instanzen erstellst, funktioniert das URL-Matching nicht so, wie es eigentlich sein sollte. Untergeordnete Komponenten kennen den Pfad ihrer übergeordneten Komponente nicht, also muss man ein bisschen mehr tun, als nur eine Vue-Router-Instanz in jeder untergeordneten Komponente zu erstellen.
Nehmen wir an, wir wollen zwei Hauptlinks auf unserer Seite haben und ein vertikales Menü innerhalb des Inhalts des ersten Links. Auf diese Weise haben wir zwei verschachtelte Router, aber um es übersichtlicher zu machen, fügen wir auch einen Abschnitt mit Tabs innerhalb der verschachtelten Route hinzu.
Hier ist unser Arbeitsbeispiel:
Wie funktioniert es also?
Zuerst müssen wir die Hauptinstanz unseres Routers erstellen. Außerdem müssen wir zwei neue Routen für unsere Hauptseiten erstellen. Die erste heißt "/nested" und die zweite heißt "/single". Die einfache Route ist nichts Besonderes, aber für die verschachtelte Route müssen wir den Alias-Wert auf "/verschachtelt/*" setzen, damit alle verschachtelten Routen übereinstimmen.
Warum brauchen wir das? Das ist ganz einfach. Wenn wir die URL "/nested/tabs" aufrufen, wollen wir die Komponente "Tabs" über die Komponente "VerticalMenu" auflösen, da die Komponente "Tabs" innerhalb der Komponente "VerticalMenu" registriert ist.
Außerdem müssen wir den "basePath" als Metadatenan die Routenkomponente übergeben. Die Konfiguration unserer Routen sollte also wie folgt aussehen:
Die VerticalMenu-Komponente
Jetzt beginnt der spaßige Teil. Innerhalb der VerticalMenu-Komponente müssen wir anders vorgehen als in der Hauptkomponente. Um Routen innerhalb der Komponente zu registrieren, die die übergeordneten Routen kennen, müssen wir 4 Dinge tun:
Erstelle eine neue Vue-Router-Instanz, ohne irgendwelche Routen zu definieren.
Sicherstellen, dass die Routen, die wir registrieren wollen, nicht bereits registriert sind.
Dynamisches Hinzufügen von Routen innerhalb des von Vue erstellten Hooks. (Wir müssen das tun, damit wir auf die aktuelle Komponente zugreifen können, die uns Zugriff auf $parent in der routeHelper.js gibt. Diese wird benötigt, um den basePath aus den Metadaten zu holen, die wir zuvor definiert haben)
Verwende immer Routennamen, um eine Route zu referenzieren, da unsere Pfade dynamisch sind.
Die Funktion getParentRouterPath(this) gibt unsere übergeordnete Route zurück, sodass wir unsere URLs unendlich verschachteln können. Sie gibt jedoch einen leeren String zurück, wenn es keine übergeordnete Route gibt, was uns die Möglichkeit gibt, diese Komponente überall zu registrieren, ohne eine übergeordnete Routerinstanz zu benötigen.
Die Funktion routeNameAlreadyRegistered(router, routeName) prüft nur, ob die Routen noch nicht vorhanden sind, damit Vue-Router nicht die Warnung "route already exist" ausgibt, wenn die Komponente neu geladen wird.
Das war's!
Lass mich wissen, wenn du Fragen oder Anregungen zu diesem Ansatz hast. Wenn du mit mir in Kontakt treten willst, kannst du mich gerne auf Twitter kontaktieren.
