Stel een robuust routeringssysteem in voor uw Vue-toepassing met behulp van de Vue Router.

Vue Router, de officiële router voor Vue, maakt het mogelijk om Single-Page Applications (SPA's) in Vue te bouwen. Met Vue Router kunt u de componenten van uw webapp toewijzen aan verschillende browserroutes, de geschiedenisstack van uw app beheren en geavanceerde routeringsopties instellen.

Aan de slag met de Vue Router

Voer het volgende uit om aan de slag te gaan met Vue Router npm (knooppuntpakketbeheerder) opdracht in uw voorkeursdirectory om uw Vue-toepassing te maken:

npm create vue

Wanneer u wordt gevraagd of u Vue Router wilt toevoegen voor Toepassing op één pagina ontwikkeling, kies Ja.

Open vervolgens uw project in uw favoriete teksteditor. Die van je app src map moet een router map.

De router map herbergt een index.js bestand met de JavaScript-code voor het afhandelen van routes in uw toepassing. De index.js bestand importeert twee functies uit het vue-router pakket: maakRouter En createWebGeschiedenis.

De maakRouter functie maakt een nieuwe routeconfiguratie van een object. Dit object bevat de geschiedenis En routes sleutels en hun waarden. De routes sleutel is een reeks objecten die de configuratie van elke route beschrijven, zoals te zien is in de bovenstaande afbeelding.

Na het configureren van uw routes dient u deze te exporteren router instantie en importeer deze instantie in het main.js bestand:

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

Je importeerde de router functie in de main.js bestand en vervolgens uw Vue-app deze routerfunctie laten gebruiken met de gebruik methode.

U kunt vervolgens uw routes toepassen op uw Vue-app door een vergelijkbaar codeblok te structureren als hieronder: