Vue.js Reititin

Vue.js on reaktiivinen javascript-kehys, jota käytetään käyttöliittymien (käyttöliittymät) ja SPA-alueiden (yhden sivun sovellukset) rakentamiseen, ja kehittäjät rakastavat koodata ja tuntea vapautta ja mukavuutta kehittäessään sovelluksia Vue-sovelluksessa.js. Reititystä varten Vue.js ei tarjoa sisäänrakennettua reititysominaisuutta. Mutta tämän ominaisuuden tarjoamiseksi on olemassa virallinen kolmannen osapuolen kirjasto, jonka nimi on Vue Router. Käyttämällä tätä ominaisuutta voimme navigoida verkkosivujen välillä ilman lataamista. Joten tässä artikkelissa aiomme nähdä, kuinka voimme asentaa ja käyttää Vue-reititintä Vue-sovelluksessa.js.

Asennus

Voimme asentaa Vue-reitittimen olemassa olevaan Vue-reitittimeen.js-projekti suorittamalla seuraava komento terminaalissa

npm asenna vue-reititin

Onnistuneen asennuksen jälkeen meidän on tuotava VueRouter pääosin.js-tiedosto myös src-hakemistossa käyttäen seuraavaa syntaksia

tuo Vue 'vue'sta
tuo reititin kohteesta './ reititin '
Vue.käyttö (reititin)

Kun olet tuonut reitittimen, voit käyttää vue-reititintä projektissasi.

Mutta jos asennat Vue-sovellusta.js käyttämällä Vue CLI: tä. Et tarvitse tätä ylimääräistä asennusvaihetta. Voit lisätä vue-reitittimen laajennuksen esiasetuksen valinnan aikana.

Käyttö

Vue-reitittimen käyttö on hyvin yksinkertaista ja helppokäyttöistä. Ensinnäkin mallissa tai HTML: ssä

Tässä melko yksinkertainen ja selkeä esimerkki vue-reitittimestä. Olemme luoneet yksinkertaisen navigoinnin reitittimen linkkikomponenttien avulla ja tarjoamme linkin käyttämällä rekvisiittaa nimeltä. Reitittimen linkki toimii samalla tavalla kuin ankkuritunniste. Se renderoidaan oletusarvoisesti 'a' -tunnisteeksi. Reitittimenäkymässä meillä on reittiä vastaava suhteellinen komponentti.

Javascriptissa meidän on ensin rekisteröitävä ja tuotava komponentit määrittelemään niiden reitit. Oletetaan, että meillä on komponentti nimeltä Comp.vue näkymähakemistossa, johon tuomme reitittimen hakemistossa.js-tiedosto reitittimen hakemistossa ja määritä se reitiksi.

Komponentin tuonnissa käytämme seuraavaa lausetta

tuoda Comp kohteesta "... / views / Comp.vue ";

Tuonnin jälkeen meidän on määritettävä reitti nyt ja kartoitettava se komponenttiin. Kuten tämä,

const reitit = [

polku: "/",
nimi: "Comp",
komponentti: Comp

];

Voimme antaa myös useita reittejä pilkulla erotettuna. Kuten tämä,

const reitit = [

polku: "/",
nimi: "Comp",
komponentti: Comp
,

polku: "/ comp2",
nimi: "Comp2",
komponentti: Comp2

];

Reittien määrittelyn jälkeen. Siirrä reittiryhmä reitittimen esiintymiin. Joten, luodaan myös reitittimen esiintymä

const reititin = createRouter (
reitit // lyhenne sanoista reitit: reitit
);

Loppujen lopuksi pääosin.js-tiedosto. Meidän on luotava pääesimerkki ja asennettava se samoin ja injektoitava reitit siihen, jotta koko sovellus tietää reitit.

createApp (sovellus)
.käyttö (reititin)
.mount ("# app");

Käyttämällä tätä injektiotekniikkaa. Voimme käyttää reititintä missä tahansa komponentissa Tämä.$ reititin.

Voimme nyt työntää reittejä ohjelmallisesti napin painalluksella tai haluamallasi tavalla sen sijaan, että käytämme reitittimen linkkikomponenttia. Esimerkiksi,

menetelmät:
clickFunc ()
Tämä.$ reititin.työnnä ('/ noin')

Kokoonpano ja yhteenveto

Tässä artikkelissa olemme oppineet asentamaan Vue Routerin eri tavoin ja oppineet käyttämään Vue-reititintä ohjelmallisesti javascriptissä ja Vue-ohjelmassa.js: n malli. Olemme myös oppineet asettamaan Vue Routerin olemassa olevaan projektiin erittäin helpossa ja vaiheittaisessa yksityiskohtaisessa oppaassa. Jos haluat oppia lisää Vue Routerista, käy ystävällisesti osoitteessa Vue Router: Official Docs.