Vue3 implementiert eine dynamische Menüfunktion

Artikelverzeichnis

  • 0. Wirkungsdemonstration
  • 1. Erstellen Sie ein Vue3-Projekt
    • 1.1 Erstellen Sie ein Vue3-Projekt mit Vite-Gerüst
    • 1.2 Dateialias festlegen
    • 1.3 Element-Plus installieren und konfigurieren
    • 1.4 Routing installieren und konfigurieren
  • 2. Anmeldeseite
  • 3. Backend-Verwaltungsseite
    • 3.1 Erstellen Sie das Hintergrund-Framework
    • 3.2 Linke Menüleiste
    • 3.3 Header-Benutzerinformationen
    • 3.4 Hauptinhalt
    • 3,5 Fußzeile
  • 4. Konfigurieren Sie statisches Routing
  • 5. Aktivierungsmenü aufzeichnen
    • 5.1 el-menu bindet das standardmäßig aktive Attribut
    • 5.2 Klickereignis zum Menü hinzufügen
    • 5.3 Aktivierungsmenü initialisieren
  • 6. Dynamisches Routing
    • 6.1 Erfolgreiche Anmeldung und Datenspeicherung
    • 6.2 Route Navigation Guard konfiguriert Routen dynamisch
    • 6.3 Lösen Sie das Problem einer leeren Seite nach dem Aktualisieren der Seite
  • 7. Vollständiger Code

Hauptschritte:
Fügen Sie hier eine Bildbeschreibung ein

0. Wirkungsdemonstration

Fügen Sie hier eine Bildbeschreibung ein

1. Erstellen Sie ein Vue3-Projekt

1.1 Erstellen Sie ein Vue3-Projekt mit Vite-Gerüst

npm create vite@latest vue3-zhifou -- --template vue

Geben Sie den Code-Editor in den soeben erstellten Projektordner ein.

#安装依赖
 npm

Ich denke du magst

Origin blog.csdn.net/bjzhang75/article/details/142642749
Empfohlen
Rangfolge