Phenquestions
Vue.js er en reaktiv javascript-ramme, der bruges til at oprette brugergrænseflader (brugergrænseflader) og SPA'er (applikationer med en side), og udviklere elsker at kode og føle frihed og komfort, mens de udvikler applikationer i Vue.js. Til routingformål, Vue.js indeholder ikke den indbyggede routing-funktion. Men der er et officielt tredjepartsbibliotek med navnet Vue Router til levering af denne funktion. Ved at bruge denne funktion kan vi navigere mellem websiderne, men uden at genindlæse. Så i denne artikel vil vi se, hvordan vi kan installere og bruge Vue Router i Vue.js.
Installation
Vi kan installere Vue-routeren i en eksisterende Vue.js-projekt ved at køre følgende kommando i terminalen
npm installer vue-routerEfter en vellykket installation skal vi hovedsageligt importere VueRouter.js-fil også i src-biblioteket ved hjælp af følgende syntaks
importer Vue fra 'vue'importer router fra './ router '
Vue.brug (router)
Efter at have importeret routeren, er du god til at gå og bruge vue-router i dit projekt.
Men hvis du installerer Vue.js bruger Vue CLI. Du har ikke brug for dette ekstra installationstrin. Du kan tilføje et vue-router-plugin, når du vælger en forudindstilling.
Anvendelse
Brugen af vue-routeren er meget enkel og nem at bruge. Først i skabelonen eller HTML
I dette ret enkle og klare eksempel på vue-router. Vi har oprettet enkel navigation ved hjælp af router-link komponenter og leverer linket ved hjælp af den prop, der hedder 'til'. Router-linket fungerer det samme som et anker 'a' tag. Det gengives faktisk som et 'a' -tag som standard. I routervisningen har vi den relative komponent, der matcher ruten.
I javascriptet skal vi først registrere og importere komponenterne for at definere deres ruter. Vi antager, at vi har en komponent ved navn Comp.vue i visningskataloget, som vi importerer til i routerens indeks.js-fil i routermappen og definer den som en rute.
For at importere en komponent bruger vi følgende udsagn
importer Comp fra "… / visninger / Comp.vue ";Efter importen skal vi definere ruten nu og kortlægge den til komponenten. Sådan her,
const ruter = [sti: "/",
navn: "Comp",
komponent: Comp
];
Vi kan også give flere ruter adskilt af et komma. Sådan her,
const ruter = [sti: "/",
navn: "Comp",
komponent: Comp
,
sti: "/ comp2",
navn: "Comp2",
komponent: Comp2
];
Efter at have defineret ruterne. Send ruterarray til routerens forekomster. Så lad os også oprette routerinstansen
const router = createRouter (ruter // forkortelse for 'ruter: ruter'
);
I sidste ende, i det væsentlige.js-fil. Vi er nødt til at oprette rodforekomsten og også montere den og injicere ruterne i den, så hele appen bliver opmærksom på ruterne.
createApp (App).brug (router)
.mount ("# app");
Ved at bruge denne injektionsteknik. Vi kan få adgang til routeren i en hvilken som helst komponent ved hjælp af det her.$ router.
Vi kan nu programmatisk skubbe ruter ved at klikke på en knap eller hvad du vil, i stedet for at bruge router-link-komponenten. For eksempel,
metoder:clickFunc ()
det her.$ router.skub ('/ om')
Indpakning og resumé
I denne artikel har vi lært at installere Vue Router på forskellige måder og lært at bruge Vue-router programmatisk i javascript og i Vue.js's skabelon. Vi har også lært at oprette Vue Router i et eksisterende projekt i en meget nem og trin for trin detaljeret vejledning. Hvis du vil lære mere om Vue Router, bedes du besøge Vue Router: Official Docs.
