Sådan håndteres routing i Vue med Vue Router

Vue Router, den officielle router for Vue, gør det muligt at bygge Single-Page Applications (SPA’er) i Vue. Vue Router lader dig kortlægge din webapps komponenter til forskellige browserruter, administrere din apps historiestak og opsætte avancerede routingmuligheder.

Kom godt i gang med Vue Router

For at komme i gang med Vue Router skal du køre følgende npm (Node Package Manager) kommando i din foretrukne mappe for at oprette din Vue-applikation:

 npm create vue 

Når du bliver bedt om at tilføje Vue Router til Single Page Application Development, skal du vælge Ja.

Åbn derefter dit projekt i din foretrukne teksteditor. Din apps src-mappe bør indeholde en routermappe.

Routermappen rummer en index.js-fil, der indeholder JavaScript-koden til håndtering af ruter i din applikation. Filen index.js importerer to funktioner fra vue-router-pakken: createRouter og createWebHistory.

CreateRouter-funktionen opretter en ny rutekonfiguration fra et objekt. Dette objekt indeholder historik- og rutenøglerne og deres værdier. Rutenøglen er en række objekter, der beskriver hver rutes konfiguration, som det ses på billedet ovenfor.

Når du har konfigureret dine ruter, skal du eksportere denne routerinstans og importere denne instans 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 importerede routerfunktionen til main.js-filen og fik derefter din Vue-app til at bruge denne routerfunktion med brugsmetoden.

Du kan derefter anvende dine ruter til din Vue-app ved at strukturere en lignende kodeblok 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>
 

Ovenstående kodeblok demonstrerer brugen af ​​Vue Router i en Vue-komponent. Kodestykket importerer to komponenter fra vue-router-biblioteket: RouterLink og RouterView.

RouterLink-komponenterne opretter links til Hjem- og Om-siderne i ovenstående kodestykke. Til-attributten angiver stien til den rute, du navigerer efter, når du klikker på linket. Her har du et link, der peger til rodruten (“/”) og et andet link, der peger på “/about”-ruten.

Komponenten gengiver den komponent, der er knyttet til den aktuelle rute. Den fungerer som en pladsholder, hvor den aktuelle rutes indhold gengives. Når du navigerer til en anden rute, gengives den komponent, der er knyttet til den rute, inde i komponenten.

Tilføjelse af parametre til din applikations ruter

Vue Router giver dig mulighed for at videregive parametre og forespørgsler til ruter. Parametre er dynamiske dele af URL’en, angivet med et kolon “:”.

For at indstille din Vue Router til at kunne fange parametre i appens ruter, konfigurer den specifikke rute 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: "/developer/:profileNumber",
      name: "developer",
      component: () => import("../views/devView.vue"),
    },
  ],
});

Ovenstående kodeblok viser en routerinstans med to ruter: hjem og udvikler. Udviklerruten viser information om en bestemt udvikler baseret på udviklerens profilnummer.

Rediger nu din App.vue-fil, så den ligner kodestykket 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>
 

Ovenstående kodeblok indstiller udviklervariablen som et reaktivt objekt med to egenskaber: navn og profil. Derefter rutes den anden RouterLink-komponent til devView-komponenten. Du kan nu få adgang til værdien af ​​den param, du sender til url’en i skabelonblokken eller JavaScript-blokken for devView-komponenten.

For at få adgang til denne værdi i skabelonblokken for devView-komponenten, giver Vue en $route-metode, et objekt, der indeholder egenskaber, der detaljerer URL’ens oplysninger. Disse oplysninger omfatter fuld sti, forespørgsler, parametre og komponenter.

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

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

Ovenstående kodestykke viser, hvordan man bruger metoden $route til at få adgang til og vise værdien af ​​parameteren profileNumber i komponentens skabelon.

Egenskaben params i metoden $route indeholder de parametre, du definerer i en rute. Når Vue gengiver denne komponent, erstatter den værdien af ​​$route.params.profileNumber med den faktiske værdi, du sender i URL’en.

For eksempel, hvis du besøger /developer/123, er den viste besked “Dette er udvikler 123 om side”.

Du kan også få adgang til ruteoplysningerne i JavaScript-blokken på din komponent. 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 kodeblok fik du adgang til $route-objektet direkte i skabelonen for at hente ruteparametrene. I den opdaterede kodeblok importerede du dog funktionen useRoute() fra vue-router-pakken. Du tildelte funktionen til en variabel, som du derefter brugte i skabelonen for din Vue-komponent.

Med useRoute() følger du Vue 3’s sammensætning API-tilgang, der udnytter reaktivitetssystemet. Dette sikrer, at komponenten automatisk opdateres, når ruteparametrene ændres.

Tilføjelse af forespørgsler til din applikations ruter

Forespørgsler eller forespørgselsstrenge er valgfrie parametre, der tilføjes til URL’en efter et spørgsmålstegn “?”. For eksempel i ruten “/search?name=vue”, er “name=vue” en forespørgselsstreng, hvor navn er nøglen, og vue er værdien.

For at tilføje en forespørgsel til en rute i Vue Router kan du bruge forespørgselsegenskaben for objektet to i RouterLink-komponenten. Forespørgselsegenskaben skal være et objekt, hvor hvert nøgleværdipar repræsenterer en forespørgselsparameter. Her er et eksempel:

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

Når du har tilføjet en forespørgsel til en rute, kan du få adgang til forespørgselsparametrene i dine Vue-komponenter. Du kan gøre dette med $route-objektet eller useRoute-funktionen, svarende til at tilføje ruteparametre.

Her er et eksempel på, hvordan du bruger en forespørgselsparameter i en komponent:

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

Dette kodestykke viser, hvordan man får adgang til og gengiver værdien af ​​en forespørgselsparameter (navn) fra URL’en ved hjælp af $route.query-objektet i skabelonen for en Vue.js-komponent.

Definering af en reserveside (404).

Vue Router giver dig mulighed for at definere en reserverute, der vil blive matchet, når ingen andre ruter matcher URL’en. Dette er nyttigt til at vise en “404 Not Found”-side.

Sådan definerer du en reserverute med Vue Router:

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

/:pathName-delen angiver et dynamisk segment i URL’en, og (.*) er et regulært JavaScript-udtryk, der matcher alle tegn efter det dynamiske segment. Dette gør det muligt for ruten at matche enhver sti.

Når en bruger navigerer til en URL, der ikke matcher nogen andre ruter, gengiver Vue NotFoundView-komponenten. Du bruger denne tilgang til at håndtere 404-fejl eller vise en reserveside, når en anmodet rute ikke findes.

Lær at oprette animationer i Vue

Du lærte, hvordan du tilføjer parametre og forespørgsler til din applikations ruter. Du har også lært, hvordan du definerer en reserveside til at håndtere 404-fejl. Vue Router giver meget mere funktionalitet, som at indstille dynamiske og indlejrede ruter.

Tilføjelse af animationer og overgange mellem elementer på en webside kan forbedre brugeroplevelsen markant. Du skal lære at skabe overgange og animationer i Vue for at skabe et jævnere, mere engagerende og generelt bedre websted.