Vue.js usmjerivač

Vue.js je reaktivni javascript okvir koji se koristi za izgradnju korisničkog sučelja (korisničkog sučelja) i SPA-a (aplikacije na jednoj stranici), a programeri vole kodirati i osjećaju slobodu i udobnost tijekom razvoja aplikacija u Vueu.js. Za potrebe usmjeravanja, Vue.js ne nudi ugrađenu značajku usmjeravanja. No, postoji službena biblioteka treće strane s imenom Vue Router za pružanje ove značajke. Korištenjem ove značajke možemo se kretati između web stranica, ali bez ponovnog učitavanja. Dakle, u ovom ćemo članku vidjeti kako možemo instalirati i koristiti Vue usmjerivač u Vueu.js.

Montaža

Vue usmjerivač možemo instalirati u postojeći Vue.js projekt izvođenjem sljedeće naredbe u terminalu

npm instalirati vue-router

Nakon uspješne instalacije, moramo uvesti VueRouter u glavnu.js datoteku u direktoriju src koristeći i sljedeću sintaksu

uvezi Vue iz 'vue'
uvoz usmjerivača iz './ usmjerivač '
Vue.koristi (usmjerivač)

Nakon uvoza usmjerivača, dobro je krenuti i koristiti vue-usmjerivač u svom projektu.

Ali ako instalirate Vue.js koristeći Vue CLI. Ovaj dodatni korak instalacije neće vam trebati. Dodatak vue-router možete dodati tijekom odabira unaprijed postavljene postavke.

Upotreba

Korištenje vue-routera vrlo je jednostavno i jednostavno za upotrebu. Prvo, u predlošku ili HTML-u

U ovom prilično jednostavnom i jasnom primjeru vue-routera. Stvorili smo jednostavnu navigaciju koristeći komponente usmjerivača i pružamo vezu koristeći oslonac pod nazivom 'to'. Link usmjerivača radi isto kao sidro "a" oznaka. Zadano se prikazuje kao "a" oznaka. U prikazu usmjerivača imat ćemo relativnu komponentu koja odgovara ruti.

U javascriptu prvo moramo registrirati i uvesti komponente kako bismo definirali njihove rute. Pretpostavljamo da imamo komponentu nazvanu Comp.vue u direktoriju views u koji ćemo uvesti u indeks usmjerivača.js datoteku u direktoriju usmjerivača i definirajte je kao rutu.

Za uvoz komponente koristimo sljedeću izjavu

import Comp iz "... / views / Comp.vue ";

Nakon uvoza moramo odmah definirati rutu i preslikati je na komponentu. Kao ovo,

const rute = [

staza: "/",
naziv: "Comp",
komponenta: Komp

];

Možemo dati i više ruta odvojenih zarezom. Kao ovo,

const rute = [

staza: "/",
naziv: "Comp",
komponenta: Komp
,

putanja: "/ comp2",
naziv: "Comp2",
komponenta: Comp2

];

Nakon definiranja ruta. Proslijedite niz ruta instancama usmjerivača. Dakle, kreirajmo i instancu usmjerivača

usmjerivač const = createRouter (
routes // skraćenica od 'routes: routes'
);

Na kraju, glavno.js datoteku. Moramo stvoriti root instancu i montirati i to te u nju ubrizgati rute tako da cijela aplikacija postane svjesna ruta.

createApp (aplikacija)
.koristi (usmjerivač)
.mount ("# app");

Korištenjem ove tehnike ubrizgavanja. Usmjerivaču možemo pristupiti u bilo kojoj komponenti pomoću ovaj.$ usmjerivač.

Sada možemo programski gurati rute jednim klikom na gumb ili bilo što drugo, umjesto da koristimo komponentu usmjerivača-veze. Na primjer,

metode:
clickFunc ()
ovaj.$ usmjerivač.push ('/ about')

Omotavanje i sažetak

U ovom smo članku naučili instalirati Vue usmjerivač na različite načine i naučili smo programsku upotrebu Vue usmjerivača u javascriptu i u Vueu.js predložak. Također smo naučili postaviti Vue usmjerivač u postojeći projekt u vrlo jednostavnom i detaljnom vodiču, korak po korak. Ako želite saznati više o Vue usmjerivaču, posjetite Vue usmjerivač: Službeni dokumenti.