Vue.JS -ruter

Vue.JS er et reaktivt JavaScript-rammeverk, som brukes til å bygge UIS (brukergrensesnitt) og spa (enkeltsider-applikasjoner) og utviklere elsker å kode og føle frihet og komfort mens de utvikler applikasjoner i Vue.JS. For rutingsformål, vue.JS gir ikke den innebygde rutingsfunksjonen. Men det er et offisielt tredjepartsbibliotek med navnet Vue Router for å tilby denne funksjonen. Ved å bruke denne funksjonen kan vi navigere mellom websidene, men uten å laste om 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 -fil i SRC -katalogen ved å bruke følgende syntaks

importere vue fra 'vue'
Importer ruter fra './ruter '
Vue.bruk (ruter)

Etter å ha importert ruteren, er du god til å bruke Vue-Router i prosjektet ditt.

Men hvis du installerer Vue.JS ved hjelp av vue cli. Du trenger ikke dette ekstra installasjonstrinnet. Du kan legge til en Vue-Router-plugin under valg av forhåndsinnstilling.

Bruk

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

I dette ganske enkle og tydelige eksemplet på Vue-Router. Vi har laget enkel navigasjon ved hjelp av ruter-link-komponenter og gir koblingen ved hjelp av rekvisitt som heter 'til'. Ruter-linket fungerer på samme måte som et anker 'A' tag. Det er faktisk gjengitt som en 'en' tag som standard. I ruterutsikt vil vi ha den relative komponenten som samsvarer med ruten.

I JavaScript må vi først registrere og importere komponentene for å definere rutene deres. Vi antar at vi har en komponent som heter comp.Vue i visningskatalogen som vi vil importere i ruterens indeks.JS -fil i ruterkatalogen og definere den som en rute.

For å importere en komponent, bruker vi følgende uttalelse

Import Comp fra "… /Visninger /komp.vue ";

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

const ruter = [

Sti: "/",
Navn: "Comp",
Komponent: komp

];

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

const ruter = [

Sti: "/",
Navn: "Comp",
Komponent: komp
,

Sti: "/Comp2",
Navn: "Comp2",
Komponent: Comp2

];

Etter å ha definert rutene. PASS ROUTS -ARRAY til ruterforekomstene. Så la oss også lage ruterforekomsten

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

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

CreateApp (app)
.bruk (ruter)
.mount ("#app");

Ved å bruke denne injeksjonsteknikken. Vi kan få tilgang til ruteren i en hvilken som helst komponent ved hjelp av dette.$ ruter.

Vi kan nå programmatisk skyve ruter med et klikk på en knapp eller noe du vil, i stedet for å bruke ruter-link-komponenten. For eksempel,

Metoder:
clickFunc ()
dette.$ ruter.Push ('/About')

Innsamling og sammendrag

I denne artikkelen har vi lært å installere Vue Router ved å bruke forskjellige måter og lært å bruke Vue -ruteren programmatisk i JavaScript og i Vue.JSs mal. Vi har også lært å sette opp Vue -ruteren i et eksisterende prosjekt i en veldig enkel og trinnvis detaljert guide. Hvis du vil lære mer om Vue -ruteren, kan du besøke Vue Router: Offisielle dokumenter.