Vue.js router

Vue.js je reaktivní rámec javascript, který se používá k vytváření uživatelských rozhraní (uživatelská rozhraní) a SPA (jednostránkové aplikace) a vývojáři rádi kódují a cítí svobodu a pohodlí při vývoji aplikací ve Vue.js. Pro účely směrování, Vue.js neposkytuje integrovanou funkci směrování. K poskytování této funkce však existuje oficiální knihovna třetích stran s názvem Vue Router. Pomocí této funkce můžeme procházet mezi webovými stránkami, ale bez opětovného načítání. V tomto článku se tedy podíváme, jak můžeme nainstalovat a používat Vue Router ve Vue.js.

Instalace

Můžeme nainstalovat router Vue do existujícího Vue.js projekt spuštěním následujícího příkazu v terminálu

npm install vue-router

Po úspěšné instalaci musíme importovat VueRouter v hlavní části.js soubor také v adresáři src pomocí následující syntaxe

importovat Vue z 'vue'
import routeru z './ router '
Vue.použít (router)

Po importu routeru je dobré jít a použít vue-router ve vašem projektu.

Ale pokud instalujete Vue.js pomocí Vue CLI. Tento další krok instalace nebudete potřebovat. Během výběru předvolby můžete přidat plugin vue-router.

Používání

Použití vue-routeru je velmi jednoduché a snadno použitelné. Nejprve v šabloně nebo HTML

V tomto docela jednoduchém a jasném příkladu vue-router. Vytvořili jsme jednoduchou navigaci pomocí komponent router-link a poskytneme odkaz pomocí rekvizity s názvem 'to'. Směrovač funguje stejně jako kotevní značka „a“. Ve výchozím nastavení se ve skutečnosti vykresluje jako značka „a“. V pohledu routeru budeme mít relativní komponentu, která odpovídá trase.

V JavaScriptu musíme nejprve zaregistrovat a importovat komponenty, abychom definovali jejich trasy. Předpokládáme, že máme komponentu nazvanou Comp.vue v adresáři zobrazení, do kterého budeme importovat v indexu routeru.soubor js v adresáři routeru a definujte jej jako trasu.

K importu komponenty použijeme následující příkaz

importovat Comp z „… / view / Comp.vue ";

Po importu musíme nyní definovat trasu a namapovat ji na komponentu. Takhle,

const trasy = [

cesta: „/“,
název: „Comp“,
komponenta: Comp

];

Můžeme také uvést více tras oddělených čárkou. Takhle,

const trasy = [

cesta: „/“,
název: „Comp“,
komponenta: Comp
,

cesta: „/ comp2“,
název: „Comp2“,
komponenta: Comp2

];

Po definování tras. Předejte pole směrů instancím routeru. Vytvořme tedy také instanci routeru

const router = createRouter (
trasy // zkratka pro „trasy: trasy“
);

Nakonec v hlavní.soubor js. Musíme vytvořit kořenovou instanci a připojit ji také a vložit do ní trasy, aby si celá aplikace byla vědoma tras.

createApp (aplikace)
.použít (router)
.mount ("# aplikace");

Použitím této injekční techniky. Můžeme přistupovat k routeru v jakékoli komponentě pomocí tento.$ router.

Nyní můžeme programově tlačit trasy pouhým kliknutím na tlačítko nebo cokoli chcete, namísto použití komponenty router-link. Například,

metody:
clickFunc ()
tento.$ router.push ('/ about')

Shrnutí a shrnutí

V tomto článku jsme se naučili instalovat Vue Router různými způsoby a naučili jsme se programově používat Vue Router v JavaScriptu a ve Vue.šablona js. Naučili jsme se také nastavit router Vue ve stávajícím projektu ve velmi snadném a podrobném průvodci krok za krokem. Pokud se chcete o routeru Vue dozvědět více, navštivte Vue Router: Official Docs.