Vue.js verwendet Element-ui, um das Navigationsmenü zu implementieren
|
In diesem Artikel wird der spezifische Code zur Implementierung des Navigationsmenüs in vue.js mithilfe von Element-ui zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Der Grund dafür, dass ich dies schreibe, ist, dass das Element beim Schreiben dieser Funktion nur einen Effekt hatte, die Funktion jedoch nicht realisiert wurde und ich damals verwirrt war. Stellen wir das Bild an die erste Stelle
Ich werde zunächst die allgemeine Implementierungsidee erläutern, da der folgende Codeausschnitt sonst verwirrend ist. Die eingekreisten linken und rechten Teile sind die Elemente, die kopiert werden können, und die rechten Teile sind die Unterkomponenten, die springen. Erstellen Sie zunächst eine Vue-Datei für das Navigationsmenü. Diese Datei importiert jedoch nur Komponenten. Der Container-Layout-Container wird verwendet, um die linken und rechten Teile zu implementieren. Die Komponenten des Navigationsmenüs werden links im el-aside-Tag platziert, und <router-view></router-view> wird rechts im el-main-Tag geschrieben, um den Routensprung zu implementieren. Ich habe die Navigationsmenüdatei Elnav.vue genannt
<Vorlage>
<div Klasse="App">
<el-container>
<el-beiseite>
<Navigationsmenü></Navigationsmenü>
</el-beiseite>
<el-main>
<Router-Ansicht></Router-Ansicht>
</el-main>
</el-container>
</div>
</Vorlage>
<Skript>
Importiere Navmenu aus „./navmenu“
Standard exportieren {
Daten() {
zurückkehren {
}
},
Komponenten: {
Navigationsmenü
}
}
</Skript>
<Stilbereich>
</Stil>Es führt hauptsächlich die Navmenu-Komponente ein (die Navmenu-Komponente ist der Stil im Element). navmenu.vue Beachten Sie die Einstellung von default-active="$route.path" und den Indexwert der Komponente jump (Option 1/2)
<Vorlage>
<div>
<el-Zeile>
<el-col>
<el-Menü
Standardmäßig aktiv = "$route.pfad"
Router
Klasse="el-menu-vertical-demo"
@open="HandleÖffnen"
@close="HandleSchließen"
>
<el-Untermenü index="1">
<Vorlagenslot="Titel">
<i class="el-icon-location"></i>
<span>Navigation 1</span>
</Vorlage>
<el-Menüelementgruppe>
<template slot="title">Gruppe 1</template>
<el-menu-item index="/Elnav/one">Option 1</el-menu-item>
<el-menu-item index="/Elnav/two">Option 2</el-menu-item>
</el-Menüelementgruppe>
<el-menu-item-group title="Gruppe 2">
<el-menu-item index="1-3">Option 3</el-menu-item>
</el-Menüelementgruppe>
<el-submenu index="1-4">
<template slot="title">Option 4</template>
<el-menu-item index="1-4-1">Option 1</el-menu-item>
</el-Untermenü>
</el-Untermenü>
</el-Menü>
</el-col>
</el-row>
</div>
</Vorlage>
<Skript>
Standard exportieren {
Methoden: {
handleOpen(Schlüssel, Schlüsselpfad) {
console.log(Schlüssel, Schlüsselpfad);
},
handleClose(Schlüssel, Schlüsselpfad) {
console.log(Schlüssel, Schlüsselpfad);
}
},
montiert() {
Konsole.log(diese.$route);
}
};
</Skript>
<Stil>
</Stil>Als nächstes folgt die Konfiguration der Route
{
Pfad: "/Elnav",
Name: "Elnav",
Komponente: () =>
importiere("../components/Elnav.vue"),
Kinder:[
{
Pfad: "/Elnav/one",
Name: "eins",
Komponente: () =>
importiere("../components/one.vue")
},
{
Pfad: "/Elnav/two",
Name: "zwei",
Komponente: () =>
importiere("../Komponenten/two.vue")
}
]
}Was den Inhalt von one.vue und anderen Vue-Dateien auf der rechten Seite betrifft, schreiben Sie sie einfach selbst Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Grundlegende Verwendung der Funktion find_in_set in MySQL
>>: So installieren Sie MySQL in Docker
Artikel empfehlen
Zusammenfassung häufig verwendeter Escape-Zeichen in HTML
Die in HTML häufig verwendeten Escape-Zeichen wer...
Listen Sie Rendering-Anweisungen für eine effiziente Entwicklung des Vue-Frontends auf
v-for-Richtlinie Wenn wir von Listen sprechen, mü...
Teilen Sie die von Webdesign-Meistern häufig verwendeten responsiven Frameworks (Zusammenfassung)
Dieser Artikel stellt die von Webdesign-Meistern ...
Detaillierte Erklärung zur Verwendung der Linux-Umleitung
Ich glaube, dass jeder manchmal Daten kopieren un...
Unterschiede zwischen MySQL CHAR und VARCHAR beim Speichern und Lesen
Einführung Kennen Sie wirklich den Unterschied zw...
MySQL-Export ganzer oder einzelner Tabellendaten
Exportieren einer einzelnen Tabelle mysqldump -u ...
Tutorial zur MySQL-Datensicherungsmethode mit Multi-Master und One-Slave
Überblick Vorgänge, die auf einer Datenbank ausge...
Verwenden Sie das Vue-Element-Admin-Framework, um die Menüfunktion dynamisch vom Backend abzurufen
Inhaltsverzeichnis 2. Detaillierte Erklärung 2.1....
Empfohlene Methode zur Fehlerbehandlung für canvas.toDataURL image/png
Problemhintergrund: Es ist erforderlich, einen Sc...
ByteDance-Interview: So implementieren Sie mit JS die gleichzeitige Anforderungssteuerung von Ajax
Vorwort Ehrlich gesagt fühle ich mich in letzter ...
Detaillierte Erklärung des Linx awk-Einführungstutorials
Awk ist eine Anwendung zur Verarbeitung von Textd...
Anwendungsszenarien für React useMemo und useCallback
Inhaltsverzeichnis verwendenMemo useCallback verw...
So fügen Sie Codebeispiele für die Vim-Implementierung in Power Shell hinzu
1. Gehen Sie zur offiziellen Website von Vim, um ...
Detaillierte Erläuterung zur Verwendung von Node.js zum Implementieren einer Hot-Reload-Seite
Vorwort Vor nicht allzu langer Zeit habe ich Brow...
Realisierung von Provinz- und Gemeindeverknüpfungseffekten auf Basis von JavaScript
In diesem Artikel wird der spezifische JavaScript...