Sådan opretter du en navigationslinje i Vue.js

Hvad kan man forvente

En tutorial til, hvordan man opretter en navigationslinjekomponent ved hjælp af Vue Router. Navigationslinjen har fire ruter:

  1. Hej Verden
  2. Hjem
  3. Om
  4. Kontakt

Disse ruter vil udfylde navigationslinjen ved hjælp af data i komponenten.

Teknisk brugt

Jeg brugte tre hovedstykker til at oprette denne navigationslinje.

  • Vue.js for at oprette en skabelon til, hvordan jeg ønskede, at navigationslinjen skulle fungere.
  • Vue-cli for at oprette vue-projektet.
  • Vue Router for at navigere mellem sider

Hvis du vil se det færdige projekt, her er GitHub Repo.

1. Start af projektet

Installer Vue-CLI, hvis ikke, kan du klikke her for at gå til installationsinstruktionssiden. Jeg kan godt lide at bruge NPM, så jeg fulgte NPM-instruktionerne. Opret en tom mappe til at arbejde i og åbne den i terminalen. Jeg bruger VS-kode, så jeg åbner den og arbejder fra den indbyggede terminal ca. 99% af tiden. Her er kommandoerne til at starte projektet. Efter hver kommando skal du trykke på enter

Vi oprettede et Vue-projekt med titlen front-end og installeret vue-router. Din mappestruktur skal se ud som nedenfor:

Vi behøver kun at bekymre os om, hvad der findes i src-mappen til denne tutorial.

Nu hvor vores miljø er konfigureret, lad os starte det, så vi ved, om der er nogen fejl, når du opretter komponenterne. Skriv følgende kommandoer i din terminal:

2. Opret de tre sider, du vil navigere til

Lad os oprette de andre tre sider, du kan navigere imellem. Den første side, vi opretter, er Hjem. Lad os tilføje en ny .vue-fil til den komponentmappe, der hedder Home.vue. Nedenfor er hvad komponenten i én fil vil indeholde.

Når du har tilføjet koden, skal du gemme denne fil og se, om der er fejl i din terminal. Ved at bruge webpack og Vue CLI bygges dit projekt hver gang det gemmes. Du vil også se din browser opdateres. Du vil gemme, når du har oprettet hver komponent.

Nu hvor hjemmekomponenten er færdig, lad os tilføje komponenten Om. Opret en ny fil About.vue i mappen Komponenter, og tilføj koden nedenfor.

Lad os tilføje den sidste komponent, Kontakt. Opret en ny fil Contact.vue i komponentmappen, og tilføj koden nedenfor.

Alle tre komponenter er tilføjet. Her er linket til tilsagnet om disse tre komponenter på GitHub.

3. Opdater router / index.js

Nu hvor vi har alle nødvendige komponenter, lad os tilføje ruter til de tre nye komponenter.

Åbn router / index.js. Det er her alle ruter er deklareret. Da det blev konfigureret med webpack-skabelonen, indeholder index.js en rute til HelloWorld-komponenten.

Først skal du importere hjemmekomponenten. For at gøre dette tilføjes import Hjem fra '@ / komponenter / Hjem til en ny linje under din import.

Din fil skal nu se sådan ud:

Det næste trin er at tilføje Hjem-stien for at være i stand til at navigere til. For at gøre det skal du tilføje et objekt i den matrix, der eksporteres. Her er det objekt, der skal tilføjes:

{
  sti: '/ hjem',
  navn: 'Hjem',
  komponent: Hjem
}

Her er hvordan index.js skal se ud, når du har tilføjet en sti til Home-komponenten:

For at teste, at denne sti fungerede, skal du navigere til http: // localhost: 8080 / # / home Lad os importere de to andre komponenter og tilføje deres stier. Din fil skal se sådan ud, når du er færdig:

Alle ruter er oprettet. Hvis du vil teste ruten, skal du ændre / hjem til / i din adresselinje. Her er et link til engagement for at se, hvad der blev tilføjet i dette trin.

4. Opret navigationskomponent og vis den

Vi vil oprette endnu en komponent, den faktiske navigationskomponent. Denne komponent gengiver navigationslinkene. Opret en Nav.vue-fil i komponentmappen. Lad os tilføje et sted at navigere til lige nu. Dette vil ikke være baseret på dataene og vil blive givet i skabelonen. Tilføj følgende i skabelonsektionen af ​​vue-filen:

  

Nav Bar

  

er specifik for Vue Router. Når du bruger Vue-Router, behøver du ikke at bruge til at linke til en anden side. til = "" er den sti, du vil linke til.

Din Navigation.vue-fil skal se sådan ud:

Nu hvor navigationslinket er udført og på plads, lad os tilføje denne komponent til alle sider. For at gøre dette er vi nødt til at importere komponenten til App.vue og vise den.

For at gøre dette tilføjes importnavigation fra './components/Navigation' til scriptafsnittet. I eksporten af ​​script skal du tilføje dette komponentobjekt efter navn:

komponenter: {
  'Navigation': Navigation
}

Nu er komponenten importeret og er klar til brug i App.vue. I skabelonsektionen skal du tilføje i

tags. App.vue-filen skal se sådan ud:

Gem denne fil, og du skal nu se navigationslinket i din browser. Hvis du vil have navigationen øverst på siden, skal du placere i starten af ​​App.vue.

Her er forpligtelseslinket til, hvad der er blevet ændret indtil videre.

Nu, hvor navigationen vises korrekt, lad os gøre, at navigationslinkene kommer fra Navigationskomponenten på den måde, så de hurtigt kan ændres, hvis det er nødvendigt.

Åben Navigation.vue I eksportobjektet skal vi tilføje de data, som komponenten får. Tilføj følgende efter navn: 'Navigation':

data() {
  Vend tilbage {
    links: [
      {
         id: 0,
         tekst: 'Hej Verden'
         side: '/ HelloWorld'
      }
    ]
  }
}

Links-arrayet indeholder objekter, der specificerer ID, hvilken tekst der skal vises, og stien der skal gå til.

I skabelonsektionen skal vi justere således:

 

Hvad dette gør er at oprette et nyt router-link til hvert objekt i links, den matrix, vi lige har oprettet. Ved at bruge v-for oprettes eller slettes et nyt router-link, når links opdateres.

Binder attributten til den side, der refereres til.

Gem filen og se i browseren, at din navigation nu har Hello World som et link til at klikke på.

Navigation.vue skal se sådan ud:

Tilføj nu resten af ​​stierne. Når alle fire stier er tilføjet, skal Navigation.vue være denne:

Teksten er alle ved siden af ​​hinanden, så lad os tilføje noget styling til denne skabelon for at placere linkene ud. Tilføj class = "afstand" til Nedenfor , tilføj følgende: