Vue.js Router

Vue.js er et reaktivt javascript-rammeverk, som brukes til å bygge brukergrensesnitt (brukergrensesnitt) og SPAer (applikasjoner med én side), og utviklere elsker å kode og føle frihet og komfort mens de utvikler applikasjoner i Vue.js. For rutingsformål, Vue.js har ikke den innebygde rutefunksjonen. Men det er et offisielt tredjepartsbibliotek med navnet Vue Router for å tilby denne funksjonen. Ved å bruke denne funksjonen kan vi navigere mellom nettsidene, men uten å laste inn på nytt. Så i denne artikkelen skal vi se hvordan vi kan installere og bruke Vue Router i Vue.js.

Installasjon

Vi kan installere Vue-ruteren i en eksisterende Vue.js prosjekt ved å kjøre følgende kommando i terminalen

npm installer vue-router

Etter en vellykket installasjon, må vi importere VueRouter i hovedsak.js-filen i src-katalogen ved å bruke følgende syntaks

importere Vue fra 'vue'
importer ruteren fra './ router '
Vue.bruk (router)

Etter at du har importert ruteren, er det greit å gå og bruke vue-router i prosjektet ditt.

Men hvis du installerer Vue.js bruker Vue CLI. Du trenger ikke dette ekstra installasjonstrinnet. Du kan legge til et vue-router-plugin når du velger en forhåndsinnstilling.

Bruk

Bruken av vue-ruteren er veldig enkel og enkel å bruke. Først i malen eller HTML

I dette ganske enkle og klare eksemplet på vue-router. Vi har laget enkel navigering ved hjelp av ruterkoblingskomponenter og gir lenken ved hjelp av støtten som heter 'til'. Routerkoblingen fungerer det samme som et anker 'a' -merke. Det blir faktisk gjengitt som en 'a' -kode som standard. I rutervisningen vil vi ha den relative komponenten som samsvarer med ruten.

I javascriptet må vi først registrere og importere komponentene for å definere rutene. Vi antar at vi har en komponent som heter Comp.vue i visningskatalogen vi skal importere til i ruterens indeks.js-filen i ruterkatalogen og definer den som en rute.

For å importere en komponent bruker vi følgende utsagn

importer Comp fra "... / views / Comp.vue ";

Etter importen må vi definere ruten nå og kartlegge den til komponenten. Som dette,

const ruter = [

sti: "/",
navn: "Comp",
komponent: Komp

];

Vi kan også gi flere ruter, atskilt med komma. Som dette,

const ruter = [

sti: "/",
navn: "Comp",
komponent: Komp
,

sti: "/ comp2",
navn: "Comp2",
komponent: Comp2

];

Etter å ha definert rutene. Gi rutearray til ruteren. Så la oss også opprette ruteren

const router = createRouter (
ruter // forkortelse for 'ruter: ruter'
);

Til slutt, i hovedsak.js-fil. Vi må opprette rotforekomsten og montere den også og injisere rutene i den slik at hele appen blir klar over rutene.

createApp (App)
.bruk (router)
.mount ("# app");

Ved å bruke denne injeksjonsteknikken. Vi har tilgang til ruteren i hvilken som helst komponent ved hjelp av dette.$ router.

Vi kan nå programmatisk trykke ruter ved å klikke på en knapp eller hva du vil, i stedet for å bruke ruterkoblingskomponenten. For eksempel,

metoder:
clickFunc ()
dette.$ router.trykk ('/ om')

Innpakning og oppsummering

I denne artikkelen har vi lært å installere Vue Router på forskjellige måter og lært å bruke Vue-ruteren programmatisk i javascript og i Vue.js mal. Vi har også lært å sette opp Vue Router i et eksisterende prosjekt i en veldig enkel og trinnvis detaljert guide. Hvis du vil lære mer om Vue Router, kan du gå til Vue Router: Official Docs.