Dieser Artikel stellt hauptsächlich die Implementierung des dynamischen Berechtigungsrouting-Menüs mit addRoutes vor. Er hat einen gewissen Referenzwert. Jetzt kann ich ihn mit allen teilen, die ihn benötigen.
Kürzlich übernommen Ein Hintergrundverwaltungssystem muss den Effekt des Herausziehens des Navigationsmenüs aus dem Hintergrund erkennen. Die herausgezogenen Navigationsmenüs unterscheiden sich je nach den unterschiedlichen Berechtigungen des angemeldeten Benutzers, und auch die bedienbaren Schnittstellen sind unterschiedlich.
Da das Hintergrundverwaltungssystem auf die Verwendung der Kombination vue+vue-router+element-ui+vuex vorbereitet ist, die Single-Page-Anwendung jedoch vor der Eingabe bereits vue- hinzugefügt hat Die Seite wird instanziiert und in die Vue-Instanz eingefügt, sodass es beim Aufrufen der Anmeldeseite keine Möglichkeit gibt, die Route erneut anzupassen. Nach langem Suchen stellte ich fest, dass vue-router in Version 2.0 die Methode addRoutes zum Hinzufügen von Routen bereitstellte, und es erschien ein Hoffnungsschimmer.
Nach viel harter Arbeit wurde die Funktion endlich implementiert, um sie einfacher überprüfen zu können. Ich hoffe auch, dass sie Kameraden helfen kann, die die gleichen Bedürfnisse haben.
1. Konfigurieren Sie zunächst lokal feste Routing-Adressen, wie z. B. Login und 404-Seiten, wie folgt:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
Nachdem wir diese festen Routen konfiguriert haben, können wir erst dann dazu gelangen Bitte melden Sie sich auf der Login-Seite an, sonst können wir nicht weitermachen.
2. Dann ist es wichtig, mit dem Back-End-Veteranen die Informationen zu vereinbaren, die im Berechtigungsmenü zurückgegeben werden müssen. Hier ist mein eigenes Routing Beispiel. . Wenn ich die Route direkt selbst definiere, hat sie die folgende Struktur:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
Gemäß der obigen Strukturanalyse ist die Route, die wirklich dynamisch konfiguriert werden muss, tatsächlich der untergeordnete Teil unter /layout. Daher muss das Backend mit einem Array aller Routen an uns zurückgegeben werden.
In den zurückgegebenen Daten ist die RootList eine Liste der Navigation der ersten Ebene Die Navigation auf der zweiten Ebene hat eigentlich keine Routing-Funktion und wird nur zum Umschalten der Navigation auf der zweiten Ebene verwendet. Der Menüauslöser und die Unterliste sind die Routing-Informationen, die wir wirklich benötigen.
3. Nachdem wir die Berechtigungsrouting-Informationen erhalten haben, müssen wir die Daten lokal verarbeiten und zu den Daten zusammenfügen, die wir benötigen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
Methoden zur Verarbeitung von Menülisten und Unterlisten: mergeSubInRoot und mergeRoutes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
Bisher haben wir die Berechtigungsweiterleitung in das lokale Routing erfolgreich konfiguriert
1 Und sekundäre Navigationsumschaltung:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
|
2. Verhindern Sie den Verlust von Aktualisierungsrouten, da die Einzelseitenanwendung während der Aktualisierung neu initialisiert wird. Zu diesem Zeitpunkt gehen alle konfigurierten Routen verloren , nur lokal Die konfigurierte Route kann übersprungen werden. Zu diesem Zeitpunkt können wir den folgenden Code in app.vue ausführen (ps: Unabhängig davon, wo die Aktualisierung durchgeführt wird, wird app.vue ausgeführt):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
Auf diese Weise wird das Routing auch bei Aktualisierung durchgeführt wird neu konfiguriert.
3. Bezüglich der Steuerung der Seitenschaltflächenebene können Sie einen Befehl anpassen, um dies zu tun. Da wir die Berechtigungsliste in das Metaobjekt der entsprechenden Route eingefügt haben, können wir auf jeder Seite problemlos zu den Berechtigungen zurückkehren, die der aktuelle Benutzer auf der aktuellen Seite hat
Nachdem ich Schluss gemacht habe, dank der addRoutes-Methode, die zu vue-router2 hinzugefügt wurde
Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Inhalte finden Sie auf der chinesischen Website „Follow PHP“!
Verwandte Empfehlungen:
Übergeben Sie Parameter über die Parameter des Vue-Attributs $route
Das obige ist der detaillierte Inhalt vonaddRoutes implementiert ein dynamisches Berechtigungsrouting-Menü. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!