So erstellen Sie eine Navigationsleiste in Vue.js

Was zu erwarten ist

Ein Tutorial zum Erstellen einer Navigationsleisten-Komponente mit Vue Router. Die Navigationsleiste enthält vier Routen:

  1. Hallo Welt
  2. Zuhause
  3. Über
  4. Kontakt

Diese Routen füllen die Navigationsleiste mit Daten innerhalb der Komponente.

Tech verwendet

Ich habe drei Hauptteile verwendet, um diese Navigationsleiste zu erstellen.

  • Vue.js, um eine Vorlage für die Funktionsweise der Navigationsleiste zu erstellen.
  • Vue-cli, um das Vue-Projekt zu erstellen.
  • Vue Router zum Navigieren zwischen Seiten

Wenn Sie das fertige Projekt sehen möchten, ist hier der GitHub Repo.

1. Starten Sie das Projekt

Installieren Sie Vue-CLI, wenn Sie dies nicht tun. Klicken Sie hier, um zur Seite mit den Installationsanweisungen zu gelangen. Ich benutze gerne NPM, daher habe ich die NPM-Anweisungen befolgt. Erstellen Sie einen leeren Ordner zum Arbeiten und öffnen Sie ihn im Terminal. Ich verwende VS Code, öffne es also und arbeite ungefähr 99% der Zeit über das eingebaute Terminal. Hier sind die Befehle zum Starten des Projekts. Drücken Sie nach jedem Befehl die Eingabetaste

Wir haben ein Vue-Projekt mit dem Titel-Frontend erstellt und den Vue-Router installiert. Ihre Ordnerstruktur sollte wie folgt aussehen:

Für dieses Tutorial brauchen wir uns nur darum zu kümmern, was sich im src-Ordner befindet.

Nachdem unsere Umgebung eingerichtet ist, starten wir sie, damit wir wissen, ob beim Erstellen der Komponenten Fehler aufgetreten sind. Geben Sie in Ihrem Terminal die folgenden Befehle ein:

2. Erstellen Sie die drei Seiten, zu denen Sie navigieren möchten

Lassen Sie uns die anderen drei Seiten erstellen, zwischen denen Sie navigieren können. Die erste Seite, die wir erstellen, ist Home. Fügen Sie dem Komponentenordner mit dem Namen "Home.vue" eine neue .vue-Datei hinzu. Nachfolgend sehen Sie, was die Einzeldateikomponente enthält.

Speichern Sie diese Datei, nachdem Sie den Code hinzugefügt haben, und überprüfen Sie, ob Ihr Terminal fehlerhaft ist. Mit dem Webpack und der Vue-CLI wird Ihr Projekt bei jedem Speichern neu erstellt. Sie werden auch sehen, wie Ihr Browser aktualisiert wird. Sie möchten speichern, nachdem Sie die einzelnen Komponenten erstellt haben.

Nachdem die Home-Komponente fertig ist, fügen wir die About-Komponente hinzu. Erstellen Sie eine neue Datei About.vue im Komponentenordner und fügen Sie den folgenden Code hinzu.

Fügen wir die letzte Komponente hinzu, Contact. Erstellen Sie eine neue Datei Contact.vue im Komponentenordner und fügen Sie den folgenden Code hinzu.

Alle drei Komponenten wurden hinzugefügt. Hier ist der Link zum Festschreiben dieser drei Komponenten auf GitHub.

3. Aktualisieren Sie die Datei router / index.js

Nachdem wir alle erforderlichen Komponenten haben, fügen wir den drei neuen Komponenten Routen hinzu.

Öffnen Sie die Datei router / index.js. Hier werden alle Routen deklariert. Seit der Einrichtung mit der Webpack-Vorlage enthält index.js eine Route für die HelloWorld-Komponente.

Importieren Sie zunächst die Home-Komponente. Fügen Sie dazu import Home aus '@ / components / Home in eine neue Zeile unterhalb Ihrer Importe ein.

Ihre Datei sollte jetzt so aussehen:

Der nächste Schritt ist das Hinzufügen des Startpfads, zu dem navigiert werden kann. Fügen Sie dazu dem Array, das exportiert wird, ein Objekt hinzu. Hier ist das Objekt zum Hinzufügen:

{
  Pfad: '/ home',
  Name: "Zuhause",
  Komponente: Home
}

So sollte index.js aussehen, nachdem ein Pfad zur Home-Komponente hinzugefügt wurde:

Um zu testen, ob dieser Pfad funktioniert, navigieren Sie zu http: // localhost: 8080 / # / home. Importieren Sie nun die beiden anderen Komponenten und fügen Sie ihre Pfade hinzu. Ihre Datei sollte dann so aussehen:

Alle Routen wurden erstellt. Wenn Sie die Route testen möchten, ändern Sie / home in / in Ihrer Adressleiste. Hier ist ein Commit-Link, um zu sehen, was in diesem Schritt hinzugefügt wurde.

4. Navigationskomponente erstellen und anzeigen

Wir werden eine weitere Komponente erstellen, die eigentliche Navigationskomponente. Diese Komponente rendert die Navigationslinks. Erstellen Sie eine Nav.vue-Datei im Komponentenordner. Fügen wir jetzt einen Ort hinzu, zu dem Sie navigieren können. Dies basiert nicht auf den Daten und wird in der Vorlage angegeben. Fügen Sie im Vorlagenbereich der VUE-Datei Folgendes hinzu:

  

Navigationsleiste   

Der ist spezifisch für Vue Router. Wenn Sie Vue-Router verwenden, müssen Sie nicht verwenden, um auf eine andere Seite zu verlinken. to = "" ist der Pfad, zu dem Sie einen Link erstellen.

Ihre Navigation.vue-Datei sollte folgendermaßen aussehen:

Nachdem der Navigationslink fertig ist, fügen wir diese Komponente allen Seiten hinzu. Dazu müssen wir die Komponente in App.vue importieren und anzeigen.

Fügen Sie dazu den Befehl Navigation aus './components/Navigation' in den Skriptbereich ein. Fügen Sie beim Export des Skripts das folgende Komponentenobjekt nach dem Namen hinzu:

Komponenten: {
  'Navigation': Navigation
}

Jetzt wurde die Komponente importiert und kann in App.vue verwendet werden. Fügen Sie im Vorlagenbereich in die

-Tags ein. Die App.vue-Datei sollte folgendermaßen aussehen:

Speichern Sie diese Datei und Sie sollten jetzt den Navigationslink in Ihrem Browser sehen. Wenn Sie möchten, dass die Navigation oben auf der Seite angezeigt wird, platzieren Sie am Anfang von App.vue.

Hier ist der Commit-Link zu dem, was bisher geändert wurde.

Nachdem die Navigation korrekt angezeigt wurde, können Sie die Navigationslinks von der Navigationskomponente so einrichten, dass sie bei Bedarf schnell geändert werden können.

Öffnen Sie Navigation.vue. Im Exportobjekt müssen Sie die Daten hinzufügen, die die Komponente abruft. Fügen Sie nach dem Namen Folgendes hinzu: 'Navigation':

Daten() {
  Rückkehr {
    Links: [
      {
         id: 0,
         Text: "Hallo Welt",
         Seite: '/ HelloWorld'
      }
    ]
  }
}

Das Links-Array enthält Objekte, die die ID, den anzuzeigenden Text und den Pfad angeben, zu dem gewechselt werden soll.

Im Vorlagenbereich werden wir den folgendermaßen anpassen:

 

Dazu wird für jedes Objekt in links, das soeben erstellte Array, eine neue Router-Verknüpfung erstellt. Mit v-for wird eine neue Router-Verbindung erstellt oder gelöscht, wenn die Verbindungen aktualisiert werden.

Bindet das Attribut to an die Seite, auf die verwiesen wird.

Speichern Sie die Datei und sehen Sie im Browser, dass Ihre Navigation jetzt Hello World als Link zum Klicken hat.

Navigation.vue sollte so aussehen:

Fügen Sie nun den Rest der Pfade hinzu. Nachdem alle vier Pfade hinzugefügt wurden, sollte Navigation.vue folgendermaßen aussehen:

Der Text wird nebeneinander angezeigt. Fügen Sie dieser Vorlage also einen Stil hinzu, um die Links voneinander zu trennen. Fügen Sie class = "spacing" zu Below hinzu und fügen Sie Folgendes hinzu: