Hur man hanterar routing i Vue med Vue Router

Vue Router, den officiella routern för Vue, gör det möjligt att bygga Single-Page Applications (SPA) i Vue. Vue Router låter dig mappa din webbapps komponenter till olika webbläsarrutter, hantera din apps historikstack och ställa in avancerade ruttalternativ.

Innehållsförteckning

Komma igång med Vue Router

För att komma igång med Vue Router, kör följande kommando npm (Node Package Manager) i din föredragna katalog för att skapa din Vue-applikation:

 npm create vue

När du tillfrågas om du vill lägga till Vue Router for Single Page Application Development väljer du Ja.

Öppna sedan ditt projekt i din föredragna textredigerare. Appens src-katalog bör innehålla en routermapp.

Routermappen innehåller en index.js-fil som innehåller JavaScript-koden för hantering av rutter i din applikation. Filen index.js importerar två funktioner från vue-router-paketet: createRouter och createWebHistory.

CreateRouter-funktionen skapar en ny ruttkonfiguration från ett objekt. Detta objekt innehåller historik- och ruttnycklarna och deras värden. Ruttnyckeln är en uppsättning objekt som beskriver varje rutts konfiguration, som visas i bilden ovan.

När du har konfigurerat dina rutter måste du exportera den här routerinstansen och importera den här instansen till 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 importerade routerfunktionen till main.js-filen och fick sedan din Vue-app att använda den här routerfunktionen med användningsmetoden.

Du kan sedan tillämpa dina rutter på din Vue-app genom att strukturera ett kodblock som liknar det nedan:

 <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>

Ovanstående kodblock visar användningen av Vue Router i en Vue-komponent. Kodavsnittet importerar två komponenter från vue-routerbiblioteket: RouterLink och RouterView.

RouterLink-komponenterna skapar länkar till hem- och Om-sidorna i kodavsnittet ovan. Till-attributet anger sökvägen till rutten du navigerar när du klickar på länken. Här har du en länk som pekar till rotrutten (”/”) och en annan länk som pekar till ”/about”-rutten.

Komponenten återger komponenten som är associerad med den aktuella rutten. Den fungerar som en platshållare där den aktuella ruttens innehåll återges. När du navigerar till en annan rutt kommer komponenten som är kopplad till den rutten att återges inuti komponenten.

Lägga till parametrar till din applikations rutter

Vue Router låter dig skicka parametrar och frågor till rutter. Parametrar är dynamiska delar av URL:en, betecknade med kolon ”:”.

För att ställa in din Vue Router för att kunna fånga parametrar i appens rutter, konfigurera den specifika rutten 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"),
    },
  ],
});

Ovanstående kodblock visar en routerinstans med två rutter: hem och utvecklare. Utvecklarvägen visar information om en viss utvecklare baserat på utvecklarens profilnummer.

Ändra nu din App.vue-fil så att den ser ut som kodavsnittet nedan:

 
<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>

Ovanstående kodblock ställer in utvecklarvariabeln som ett reaktivt objekt med två egenskaper: namn och profil. Sedan dirigeras den andra RouterLink-komponenten till devView-komponenten. Du kan nu komma åt värdet för den param du skickar in i webbadressen i mallblocket eller JavaScript-blocket för devView-komponenten.

För att komma åt detta värde i mallblocket för devView-komponenten tillhandahåller Vue en $route-metod, ett objekt som innehåller egenskaper som detaljerar informationen om URL:en. Denna information inkluderar fullPath, frågor, parametrar och komponenter.

Här är ett exempel på hur man kommer åt den specifika utvecklarens profil i devView-komponenten med metoden $route:

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

Ovanstående kodavsnitt visar hur man använder metoden $route för att komma åt och visa värdet för parametern profileNumber i komponentens mall.

Egenskapen params i metoden $route innehåller parametrarna du definierar i en rutt. När Vue renderar den här komponenten ersätter den värdet för $route.params.profileNumber med det faktiska värdet du skickar i URL:en.

Till exempel, om du besöker /developer/123, visas meddelandet ”Detta är utvecklare 123 om sidan”.

Du kan också komma åt ruttinformationen i JavaScript-blocket för din komponent. Till exempel:

 
<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 det tidigare kodblocket gick du åt $route-objektet direkt i mallen för att hämta ruttparametrarna. Men i det uppdaterade kodblocket importerade du funktionen useRoute() från vue-router-paketet. Du tilldelade funktionen till en variabel som du sedan använde i mallen för din Vue-komponent.

Med useRoute() följer du Vue 3:s kompositions-API-strategi som utnyttjar reaktivitetssystemet. Detta säkerställer att komponenten automatiskt uppdateras när ruttparametrarna ändras.

Lägga till frågor till din applikations rutter

Frågor, eller frågesträngar, är valfria parametrar som läggs till i webbadressen efter ett frågetecken ”?”. Till exempel, i rutten ”/search?name=vue”, är ”name=vue” en frågesträng där namn är nyckeln och vue är värdet.

För att lägga till en fråga till en rutt i Vue Router kan du använda query-egenskapen för objektet to i RouterLink-komponenten. Frågeegenskapen ska vara ett objekt där varje nyckel-värdepar representerar en frågeparameter. Här är ett exempel:

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

När du har lagt till en fråga till en rutt kan du komma åt frågeparametrarna i dina Vue-komponenter. Du kan göra detta med $route-objektet eller useRoute-funktionen, på samma sätt som att lägga till ruttparametrar.

Här är ett exempel på hur du använder en frågeparameter i en komponent:

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

Det här kodavsnittet visar hur man kommer åt och renderar värdet på en frågeparameter (namn) från URL:en med hjälp av $route.query-objektet i mallen för en Vue.js-komponent.

Definiera en reservsida (404).

Vue Router låter dig definiera en reservrutt som kommer att matchas när inga andra rutter matchar URL:en. Detta är användbart för att visa en ”404 Not Found”-sida.

Så här kan du definiera en reservrutt med Vue Router:

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

/:pathName-delen indikerar ett dynamiskt segment i URL:en och (.*) är ett reguljärt JavaScript-uttryck som matchar alla tecken efter det dynamiska segmentet. Detta gör att rutten matchar vilken väg som helst.

När en användare navigerar till en URL som inte matchar några andra rutter, kommer Vue att återge NotFoundView-komponenten. Du använder detta tillvägagångssätt för att hantera 404-fel eller visa en reservsida när en begärd rutt inte hittas.

Lär dig att skapa animationer i Vue

Du lärde dig hur du lägger till parametrar och frågor till din applikations rutter. Du lärde dig också hur man definierar en reservsida för att hantera 404-fel. Vue Router ger mycket mer funktionalitet, som att ställa in dynamiska och kapslade rutter.

Att lägga till animationer och övergångar mellan element på en webbsida kan förbättra användarupplevelsen avsevärt. Du måste lära dig att skapa övergångar och animationer i Vue för att skapa en smidigare, mer engagerande och överlag bättre webbplats.