Vue.js smerovač

Vue.js je reaktívny rámec JavaScriptu, ktorý sa používa na vytváranie používateľských rozhraní (používateľských rozhraní) a SPA (jednostránkových aplikácií). Vývojári radi kódujú a cítia slobodu a pohodlie pri vývoji aplikácií vo Vue.js. Pre účely smerovania, Vue.js neposkytuje zabudovanú funkciu smerovania. Na zabezpečenie tejto funkcie však existuje oficiálna knižnica tretej strany s názvom Vue Router. Pomocou tejto funkcie môžeme prechádzať medzi webovými stránkami, ale bez opätovného načítania. V tomto článku sa teda pozrieme na to, ako môžeme nainštalovať a používať smerovač Vue vo Vue.js.

Inštalácia

Môžeme nainštalovať smerovač Vue do existujúceho Vue.js projekt spustením nasledujúceho príkazu v termináli

npm install vue-router

Po úspešnej inštalácii musíme importovať hlavne VueRouter.js súbor aj v adresári src pomocou nasledujúcej syntaxe

importovať Vue z 'vue'
importovať smerovač z './router'
Vue.použitie (router)

Po importovaní smerovača je dobré v projekte použiť program vue-router.

Ale ak inštalujete Vue.js pomocou Vue CLI. Tento ďalší krok inštalácie nebudete potrebovať. Počas výberu predvoľby môžete pridať doplnok vue-router.

Využitie

Používanie vue-routeru je veľmi jednoduché a ľahko použiteľné. Najskôr v šablóne alebo HTML

V tomto celkom jednoduchom a jasnom príklade vue-router. Vytvorili sme jednoduchú navigáciu pomocou komponentov router-link a poskytneme odkaz pomocou rekvizity s názvom „do“. Smerovač-link funguje rovnako ako kotviaca značka „a“. Štandardne sa v skutočnosti vykresľuje ako značka „a“. V pohľade smerovača budeme mať relatívnu zložku, ktorá sa zhoduje s trasou.

V JavaScripte musíme najskôr zaregistrovať a importovať komponenty, aby sme definovali ich trasy. Predpokladáme, že máme komponent s názvom Comp.vue v adresári views, do ktorého budeme importovať v indexe smerovača.súbor js v adresári smerovača a definujte ho ako trasu.

Na import súčasti použijeme nasledujúce vyhlásenie

importovať Comp z „… / views / Comp.vue ";

Po importe musíme teraz definovať trasu a namapovať ju na komponent. Páči sa ti to,

konšt cesty = [

cesta: „/“,
názov: „Comp“,
komponent: Comp

];

Môžeme dať aj viac trás oddelených čiarkou. Páči sa ti to,

konšt cesty = [

cesta: „/“,
názov: „Comp“,
komponent: Comp
,

cesta: "/ comp2",
názov: „Comp2“,
komponent: Comp2

];

Po zadefinovaní trás. Predajte pole smerov inštanciám smerovača. Poďme teda tiež vytvoriť inštanciu smerovača

const router = createRouter (
trasy // skratka pre „trasy: trasy“
);

Na záver v hlavnej.súbor js. Musíme vytvoriť inštanciu root a tiež ju pripojiť a vložiť do nej trasy, aby si celá aplikácia uvedomila trasy.

createApp (aplikácia)
.použitie (router)
.mount ("# app");

Použitím tejto injekčnej techniky. K routeru môžeme pristupovať v ktorejkoľvek súčasti pomocou toto.$ router.

Teraz môžeme programovo tlačiť trasy kliknutím na tlačidlo alebo na čokoľvek chcete, namiesto toho, aby sme použili komponent router-link. Napríklad,

metódy:
clickFunc ()
toto.$ router.push ('/ about')

Balenie a zhrnutie

V tomto článku sme sa naučili inštalovať smerovač Vue rôznymi spôsobmi a naučili sme sa programátorsky používať smerovač Vue v javascript a vo Vue.šablóna js. Naučili sme sa tiež nastaviť smerovač Vue v existujúcom projekte vo veľmi jednoduchom a podrobnom sprievodcovi krok za krokom. Ak sa chcete dozvedieť viac informácií o smerovači Vue, navštívte stránku Vue Router: Oficiálne dokumenty.