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.

Komma igång med Vue Router

För att komma igång med Vue Router, kör följande npm (Node Package Manager) kommandot 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 för Ensidig applikation utveckling, välj Ja.

Öppna sedan ditt projekt i din föredragna textredigerare. Din app src katalogen bör innehålla en router mapp.

De router pärm inrymmer en index.js fil som innehåller JavaScript-koden för hantering av rutter i din applikation. De index.js fil importerar två funktioner från vue-router paket: skapaRouter och skapa WebHistory.

De skapaRouter funktionen skapar en ny ruttkonfiguration från ett objekt. Detta objekt innehåller

historia och rutter nycklar och deras värden. De rutter nyckeln är en rad objekt som beskriver varje rutts konfiguration, som visas i bilden ovan.

När du har konfigurerat dina rutter måste du exportera detta router instans och importera denna instans till main.js fil:

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 router fungera in i main.js fil och fick sedan din Vue-app att använda den här routerfunktionen med använda sig av metod.

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