Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die Navigation mit ElementUI im Vue-Router

So implementieren Sie die Navigation mit ElementUI im Vue-Router

亚连
亚连Original
2018-06-06 10:53:051724Durchsuche

Jetzt werde ich Ihnen ein Beispiel für die Verwendung von Vue-Router zur Implementierung der Navigation mit ElementUI vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Routing ist in jedem Projekt unverzichtbar. Ich habe kürzlich gelernt, Vue-Router und ElementUI zum Implementieren einer Navigationsleiste zu verwenden. Während des Lernvorgangs bin ich auf ein Problem gestoßen: Nachdem ich im Browser auf „Aktualisieren“ geklickt hatte, blieb die Seite stehen ursprünglicher Speicherort, aber die Navigation ist standardmäßig die erste.

Da ich schon lange nicht mehr mit dem Frontend in Berührung gekommen bin, ist mir das Konzept des Routings nicht ganz klar. Nachdem ich laut dem Dokument geschrieben habe, habe ich keine Ahnung, wie ich anfangen soll Meine Kollegen baten um Rat. Die Lösung bestand darin, Vuex-Management zu verwenden, aber ich hatte noch keine Erfahrung damit, also wurde dieses Problem auf Eis gelegt. Ich habe dieses Wochenende zu Hause gelernt und zufällig herausgefunden, dass ich $ verwenden kann route.path zum Festlegen der standardmäßig ausgewählten Navigation. Nach dem Festlegen hatte dies jedoch keine Auswirkung. Beim Aktualisieren blieb die Seite immer noch an der ursprünglichen Position und die Navigation wurde jedoch nicht ausgewählt, und ich konnte sie nicht finden Nachdem ich die Informationen lange gesucht hatte, verglich ich sie später mit einem Beispiel im Internet und stellte fest, dass vor

default-active="$route.path"

ein verbindliches Symbol hinzugefügt werden muss, wie folgt:

:default-active="$route.path"

so Nach dem Einrichten können Navigation und Seite gleichzeitig geändert werden.

Den vollständigen Navigationscode finden Sie hier:

Das Obige habe ich für alle zusammengestellt an alle in der Zukunft.

Verwandte Artikel:

Detaillierte Interpretation der Verwendung von this.$emit in vue.js

So implementieren Sie Passwörter in vue Funktion zum Ausblenden anzeigen

So verwenden Sie eine übergeordnete Komponente, um untergeordnete Komponentenereignisse in Vue aufzurufen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Navigation mit ElementUI im Vue-Router. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn