Hvordan håndtere ruting i Vue med Vue Router

Vue Router, den offisielle ruteren for Vue, gjør det mulig å bygge Single-Page Applications (SPA-er) i Vue. Vue Router lar deg kartlegge nettappens komponenter til forskjellige nettleserruter, administrere appens historiestabel og sette opp avanserte rutingalternativer.

Komme i gang med Vue-ruteren

For å komme i gang med Vue Router, kjør følgende npm (Node Package Manager) kommando i din foretrukne katalog for å lage din Vue-applikasjon:

 npm create vue 

Når du blir spurt om du vil legge til Vue Router for Single Page Application Development, velger du Ja.

Deretter åpner du prosjektet i ditt foretrukne tekstredigeringsprogram. Appens src-katalog skal inneholde en rutermappe.

Rutermappen inneholder en index.js-fil som inneholder JavaScript-koden for håndtering av ruter i applikasjonen din. index.js-filen importerer to funksjoner fra vue-router-pakken: createRouter og createWebHistory.

CreateRouter-funksjonen oppretter en ny rutekonfigurasjon fra et objekt. Dette objektet inneholder historikk- og rutenøkler og deres verdier. Rutenøkkelen er en rekke objekter som beskriver hver rutes konfigurasjon, som vist i bildet ovenfor.

Etter å ha konfigurert rutene dine, må du eksportere denne ruterforekomsten og importere denne forekomsten til 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 importerte ruterfunksjonen til main.js-filen og fikk deretter Vue-appen til å bruke denne ruterfunksjonen med bruksmetoden.

Du kan deretter bruke rutene dine til Vue-appen din ved å strukturere en lignende kodeblokk som den nedenfor:

 <script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <nav>
      <RouterLink to="https://www.makeuseof.com/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
  </header>

  <RouterView />
</template>

Kodeblokken ovenfor demonstrerer bruken av Vue Router i en Vue-komponent. Kodebiten importerer to komponenter fra vue-ruterbiblioteket: RouterLink og RouterView.

  11 beste MAC-adresseoppslagsverktøy for ethvert behov

RouterLink-komponentene oppretter lenker til Hjem- og Om-sidene i kodebiten ovenfor. Til-attributtet spesifiserer banen til ruten du navigerer når du klikker på koblingen. Her har du en lenke som peker til rotruten («/») og en annen lenke som peker til «/about»-ruten.

Komponenten gjengir komponenten knyttet til gjeldende rute. Den fungerer som en plassholder der innholdet i den gjeldende ruten vil gjengis. Når du navigerer til en annen rute, vil komponenten som er knyttet til den ruten gjengis inne i komponenten.

Legge til parametere i applikasjonens ruter

Vue Router lar deg sende parametere og spørringer til ruter. Parametre er dynamiske deler av URL-en, angitt med et kolon «:».

For å stille inn Vue-ruteren til å kunne fange parametere i appens ruter, konfigurer den spesifikke ruten i index.js-filen din:

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

Kodeblokken ovenfor viser en ruterforekomst med to ruter: hjem og utvikler. Utviklerruten viser informasjon om en bestemt utvikler basert på utviklerens profilnummer.

Endre nå App.vue-filen din slik at den ser ut som 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/">Home</RouterLink>
      <RouterLink :to="{ path: `/developer/${developer.profile}` }">
       Dev Profile
     </RouterLink>
    </nav>
  </header>

  <RouterView />
</template>

Kodeblokken ovenfor setter utviklervariabelen som et reaktivt objekt med to egenskaper: navn og profil. Deretter rutes den andre RouterLink-komponenten til devView-komponenten. Du kan nå få tilgang til verdien av parameteren du sender inn i url-en i malblokken eller JavaScript-blokken til devView-komponenten.

  Hva du ikke visste om prosjektkostnadsestimat

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

Her er et eksempel på hvordan du får tilgang til den bestemte utviklerens profil i devView-komponenten med $route-metoden:

 
<template>
  <div>
    <h1>This is developer {{ $route.params.profileNumber }} about page</h1>
  </div>
</template>

Kodebiten ovenfor viser hvordan du bruker $route-metoden for å få tilgang til og vise verdien av profileNumber-parameteren i komponentens mal.

Params-egenskapen i $route-metoden inneholder parameterne du definerer i en rute. Når Vue gjengir denne komponenten, erstatter den verdien til $route.params.profileNumber med den faktiske verdien du sender i URL-en.

For eksempel, hvis du besøker /utvikler/123, er meldingen som vises «Dette er utvikler 123 om siden».

Du kan også få tilgang til ruteinformasjonen i JavaScript-blokken til komponenten din. For eksempel:

 
<script setup>
import { useRoute } from "vue-router";

const route = useRoute();
</script>

<template>
  <div>
    <h1>This is developer {{ route.params.profileNumber }} about page</h1>
  </div>
</template>

I den tidligere kodeblokken fikk du tilgang til $route-objektet direkte i malen for å hente ruteparametrene. I den oppdaterte kodeblokken importerte du imidlertid funksjonen useRoute() fra vue-router-pakken. Du tilordnet funksjonen til en variabel som du deretter brukte i malen til Vue-komponenten.

Med useRoute() følger du Vue 3s komposisjons-API-tilnærming som utnytter reaktivitetssystemet. Dette sikrer at komponenten automatisk oppdateres når ruteparametrene endres.

Legge til spørringer i applikasjonens ruter

Spørringer, eller spørringsstrenger, er valgfrie parametere som legges til URL-en etter et spørsmålstegn «?». For eksempel, i ruten «/search?name=vue», er «name=vue» en spørringsstreng der navn er nøkkelen og vue er verdien.

For å legge til en spørring til en rute i Vue Router, kan du bruke spørringsegenskapen til to-objektet i RouterLink-komponenten. Spørringsegenskapen skal være et objekt der hvert nøkkelverdi-par representerer en spørringsparameter. Her er et eksempel:

 <RouterLink :to="{ name: 'home', query: {name: 'vue'}}">Home</RouterLink>

Etter å ha lagt til en spørring i en rute, kan du få tilgang til spørringsparametrene i Vue-komponentene dine. Du kan gjøre dette med $route-objektet eller useRoute-funksjonen, på samme måte som å legge til ruteparametere.

  VMware vSphere 7: Storage Datastore Types

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

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

Denne kodebiten viser hvordan du får tilgang til og gjengir verdien av en spørringsparameter (navn) fra URL-en ved å bruke $route.query-objektet i malen til en Vue.js-komponent.

Definere en reserveside (404).

Vue Router lar deg definere en reserverute som vil bli matchet når ingen andre ruter samsvarer med URL-en. Dette er nyttig for å vise en «404 Not Found»-side.

Slik kan du definere en reserverute med Vue Router:

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

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

Når en bruker navigerer til en URL som ikke samsvarer med noen andre ruter, vil Vue gjengi NotFoundView-komponenten. Du bruker denne tilnærmingen til å håndtere 404-feil eller vise en reserveside når en forespurt rute ikke blir funnet.

Lær å lage animasjoner i Vue

Du lærte hvordan du legger til parametere og spørringer i programmets ruter. Du har også lært hvordan du definerer en reserveside for å håndtere 404-feil. Vue Router gir mye mer funksjonalitet, som å angi dynamiske og nestede ruter.

Å legge til animasjoner og overganger mellom elementer på en nettside kan forbedre brukeropplevelsen betydelig. Du må lære å lage overganger og animasjoner i Vue for å lage et jevnere, mer engasjerende og generelt bedre nettsted.