Mester Vue Router: Bygg dynamiske SPA-er med enkel ruting!

Vue Router, den autoriserte navigasjonsløsningen for Vue-applikasjoner, muliggjør utvikling av Single-Page Applications (SPA-er) i Vue-økosystemet. Med Vue Router kan du koble komponenter i nettapplikasjonen din til forskjellige nettadresser, administrere navigasjonshistorikken og implementere avanserte ruteinnstillinger.

Start med Vue Router

For å begynne å bruke Vue Router, benytt følgende npm (Node Package Manager) kommando i ønsket mappe for å opprette ditt Vue-prosjekt:

 npm create vue 

Når du blir spurt om du ønsker å inkludere Vue Router for Single Page Application-utvikling, svarer du bekreftende.

Deretter åpner du prosjektet i din foretrukne teksteditor. Appens src-katalog skal inneholde en egen rute-mappe.

Denne mappen inneholder en index.js-fil, som inneholder JavaScript-koden for å styre ruter i applikasjonen. index.js-filen importerer to funksjoner fra vue-router-modulen: createRouter og createWebHistory.

Funksjonen createRouter etablerer en ny rutekonfigurasjon basert på et objekt. Dette objektet inneholder historikk- og rutenøkler med tilhørende verdier. Rutenøkkelen er en tabell med objekter som beskriver konfigurasjonen for hver enkelt rute, slik som vist på bildet over.

Etter å ha satt opp dine ruter, må du eksportere ruteinstansen og deretter importere den i main.js-filen:

 import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
 

Du har importert rutefunksjonen til main.js-filen og instruert Vue-applikasjonen om å bruke denne rutefunksjonen ved hjelp av use-metoden.

Deretter kan du bruke dine ruter i din Vue-applikasjon ved å organisere en kodeblokk som ligner på den nedenfor:

 <script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
  <header>
    <nav>
      <RouterLink to="https://www.makeuseof.com/">Hjem</RouterLink>
      <RouterLink to="/om">Om</RouterLink>
    </nav>
  </header>
  <RouterView />
</template>
 

Kodeblokken ovenfor illustrerer hvordan Vue Router brukes i en Vue-komponent. Kodesnutten importerer to komponenter fra vue-router-biblioteket: RouterLink og RouterView.

RouterLink-komponentene skaper koblinger til henholdsvis Hjem- og Om-siden. Attributtet «to» angir adressen til ruten du navigerer til når du klikker på lenken. I dette eksemplet har vi en lenke som peker til rotruten («/») og en annen lenke som peker til «/om»-ruten.

RouterView-komponenten viser komponenten som er knyttet til den nåværende ruten. Den fungerer som en plassholder hvor innholdet i den gjeldende ruten vil vises. Når du navigerer til en annen rute, vil komponenten som tilhører den ruten bli vist innenfor RouterView-komponenten.

Tilføye parametere til applikasjonens ruter

Vue Router gir deg muligheten til å sende både parametere og spørringer til ruter. Parametere er dynamiske deler av nettadressen, og de markeres med et kolon «:».

For å konfigurere Vue-ruteren slik at den kan fange opp parametere i appens ruter, konfigurer den spesifikke ruten i din index.js-fil:

 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "https://www.makeuseof.com/",
      name: "home",
      component: HomeView,
    },
    {
      path: "/utvikler/:profileNumber",
      name: "utvikler",
      component: () => import("../views/devView.vue"),
    },
  ],
});

Koden over demonstrerer en ruteinstans med to ruter: «hjem» og «utvikler». Utvikler-ruten viser informasjon om en bestemt utvikler, basert på utviklerens profilnummer.

Modifiser nå din App.vue-fil slik at den ligner kodebiten nedenfor:

 
<script setup>
import { ref } from "vue";
import { RouterLink, RouterView } from "vue-router";
const developer = ref([
  {
    name: "Chinedu",
    profile: 2110,
  },
]);
</script>
<template>
  <header>
    <nav>
      <RouterLink to="https://www.makeuseof.com/">Hjem</RouterLink>
      <RouterLink :to="{ path: `/utvikler/${developer.profile}` }">
       Utviklerprofil
     </RouterLink>
    </nav>
  </header>
  <RouterView />
</template>
 

Kodeblokken over definerer utviklervariabelen som et reaktivt objekt med egenskapene «navn» og «profil». Den andre RouterLink-komponenten rutes deretter til devView-komponenten. Nå har du tilgang til verdien av parameteren du sender i URL-en, enten i maldelen eller i JavaScript-delen av devView-komponenten.

For å få tilgang til denne verdien i maldelen av devView-komponenten, tilbyr Vue en $route-metode, som er et objekt som inneholder egenskaper som beskriver informasjonen i URL-en. Denne informasjonen inkluderer fullPath, spørringer, parametere og komponenter.

Her er et eksempel på hvordan du får tilgang til en bestemt utviklers profil i devView-komponenten ved hjelp av $route-metoden:

 
<template>
  <div>
    <h1>Dette er utvikler {{ $route.params.profileNumber }} sin informasjonsside</h1>
  </div>
</template>

Kodesnutten over viser hvordan du benytter $route-metoden for å hente og vise verdien av profileNumber-parameteren i komponentens mal.

Egenskapen «params» i $route-metoden inneholder de parameterne du definerer i en rute. Når Vue viser denne komponenten, erstatter den verdien av $route.params.profileNumber med den faktiske verdien som sendes i nettadressen.

For eksempel, hvis du besøker /utvikler/123, vil meldingen som vises være «Dette er utvikler 123 sin informasjonsside».

Du kan også hente ruteinformasjonen i JavaScript-delen av din komponent. For eksempel:

 
<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
</script>
<template>
  <div>
    <h1>Dette er utvikler {{ route.params.profileNumber }} sin informasjonsside</h1>
  </div>
</template>
 

I den forrige kodeblokken hentet du $route-objektet direkte i malen for å hente ruteparameterne. I den oppdaterte kodeblokken har du imidlertid importert funksjonen useRoute() fra vue-router-pakken. Du har tilordnet funksjonen til en variabel, som du deretter bruker i malen til Vue-komponenten.

Ved bruk av useRoute() følger du Vue 3’s komposisjons-API-tilnærming, som utnytter reaktivitetssystemet. Dette sikrer at komponenten oppdateres automatisk når ruteparameterne endres.

Tilføye spørringer til applikasjonens ruter

Spørringer, også kjent som spørringsstrenger, er valgfrie parametere som legges til i nettadressen etter et spørsmålstegn «?». For eksempel, i ruten «/søk?navn=vue», er «navn=vue» en spørringsstreng hvor «navn» er nøkkelen og «vue» er verdien.

For å legge til en spørring i en rute i Vue Router, kan du benytte egenskapen «query» i «to»-objektet i RouterLink-komponenten. Egenskapen «query» skal være et objekt hvor hvert nøkkelverdi-par representerer en spørringsparameter. Her er et eksempel:

 <RouterLink :to="{ name: 'hjem', query: {name: 'vue'}}">Hjem</RouterLink>

Når du har lagt til en spørring i en rute, kan du hente spørringsparameterne i dine Vue-komponenter. Du kan gjøre dette ved hjelp av $route-objektet eller useRoute-funksjonen, akkurat som med ruteparametere.

Her er et eksempel på hvordan du kan bruke en spørringsparameter i en komponent:

 
<template>
  {{ $route.query.name }}
</template>

Dette kodestykket viser hvordan du får tilgang til og viser verdien av en spørringsparameter («navn») fra nettadressen ved hjelp av $route.query-objektet i malen til en Vue.js-komponent.

Definere en standard 404-side

Vue Router lar deg definere en reserve-rute, som vil bli brukt når ingen av de andre rutene samsvarer med den angitte nettadressen. Dette er nyttig for å vise en «404 Not Found»-side.

Slik kan du definere en reserve-rute i Vue Router:

     {
      path:'/:pathName(.*)',
      name: 'NotFound',
      component: () => import('../views/NotFoundView.vue')
    }

/:pathName-delen indikerer et dynamisk segment i nettadressen, og (.*) er et regulært JavaScript-uttrykk som samsvarer med alle tegn etter det dynamiske segmentet. Dette gjør at ruten kan matche alle stier.

Når en bruker navigerer til en nettadresse som ikke samsvarer med noen av de andre rutene, vil Vue vise NotFoundView-komponenten. Denne tilnærmingen brukes for å håndtere 404-feil eller for å vise en standard side når en forespurt rute ikke blir funnet.

Lær å skape animasjoner i Vue

Du har nå lært hvordan du legger til parametere og spørringer i programmets ruter. Du har også lært hvordan du definerer en reserve-side for å håndtere 404-feil. Vue Router tilbyr mange flere funksjoner, som å angi dynamiske og nestede ruter.

Å legge til animasjoner og overganger mellom elementer på en nettside kan forbedre brukeropplevelsen betraktelig. Det er derfor viktig å lære å lage overganger og animasjoner i Vue, slik at du kan lage et mer flytende, engasjerende og generelt bedre nettsted.