Vue.js usmerjevalnik

Vue.js je reaktivni okvir javascripta, ki se uporablja za izdelavo uporabniških vmesnikov (uporabniški vmesniki) in SPA-jev (aplikacije z eno stranjo), razvijalci pa radi razvijajo programe v Vue in se počutijo svobodno in udobno.js. Za namene usmerjanja, Vue.js ne ponuja vgrajene funkcije usmerjanja. Toda za zagotavljanje te funkcije obstaja uradna knjižnica tretjih oseb z imenom Vue Router. Z uporabo te funkcije lahko krmarimo med spletnimi stranmi, vendar brez ponovnega nalaganja. Torej, v tem članku bomo videli, kako lahko v Vue namestimo in uporabljamo usmerjevalnik Vue.js.

Namestitev

Usmerjevalnik Vue lahko namestimo v obstoječi Vue.js, tako da v terminalu zaženete naslednji ukaz

npm namestite usmerjevalnik vue

Po uspešni namestitvi moramo v glavnem uvoziti VueRouter.js tudi v imeniku src z uporabo naslednje sintakse

uvozi Vue iz 'vue'
uvozi usmerjevalnik iz './ usmerjevalnik '
Vue.uporaba (usmerjevalnik)

Po uvozu usmerjevalnika lahko v svojem projektu uporabite vue-router.

Če pa nameščate Vue.js z uporabo Vue CLI. Tega dodatnega koraka namestitve ne boste potrebovali. Med izbiro prednastavitve lahko dodate vtičnik vue-router.

Uporaba

Uporaba usmerjevalnika vue je zelo preprosta in enostavna za uporabo. Najprej v predlogi ali HTML-ju

V tem precej preprostem in jasnem primeru usmerjevalnika vue. Ustvarili smo preprosto navigacijo s pomočjo komponent usmerjevalne povezave in povezavo zagotavljamo s pomočjo rekvizita z imenom "do". Povezava usmerjevalnika deluje enako kot sidrna oznaka 'a'. Privzeto je dejansko upodobljen kot oznaka 'a'. V pogledu usmerjevalnika bomo imeli relativno komponento, ki ustreza poti.

V javascriptu moramo najprej registrirati in uvoziti komponente, da določimo njihove poti. Predvidevamo, da imamo komponento z imenom Comp.vue v imeniku pogledov, v katerega bomo uvozili v indeksu usmerjevalnika.js v imeniku usmerjevalnika in jo definirajte kot pot.

Za uvoz komponente uporabimo naslednjo izjavo

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

Po uvozu moramo zdaj definirati pot in jo preslikati na komponento. Všečkaj to,

const poti = [

pot: "/",
ime: "Comp",
komponenta: Komp

];

Lahko damo tudi več poti, ločenih z vejico. Všečkaj to,

const poti = [

pot: "/",
ime: "Comp",
komponenta: Komp
,

pot: "/ comp2",
ime: "Comp2",
komponenta: Comp2

];

Po opredelitvi poti. Posredovanje matrike poti posredujte primerkom usmerjevalnika. Torej, ustvarimo tudi primerek usmerjevalnika

usmerjevalnik const = createRouter (
routes // okrajšava za 'routes: routes'
);

Na koncu v glavnem.js. Ustvariti moramo korenski primerek in ga tudi montirati ter vanj vbrizgati poti, tako da celotna aplikacija spozna poti.

createApp (aplikacija)
.uporaba (usmerjevalnik)
.mount ("# app");

Z uporabo te tehnike injiciranja. Do usmerjevalnika lahko dostopamo v kateri koli komponenti to.$ usmerjevalnik.

Zdaj lahko programsko potisnemo poti s klikom na gumb ali karkoli, kar želite, namesto da bi uporabili komponento povezave usmerjevalnika. Na primer,

metode:
clickFunc ()
to.$ usmerjevalnik.push ('/ about')

Zavijanje in povzetek

V tem članku smo se naučili namestiti usmerjevalnik Vue na različne načine in se naučili programske uporabe usmerjevalnika Vue v javascriptu in v Vue.predloga js. Prav tako smo se naučili, kako usmerjevalnik Vue nastaviti v obstoječi projekt v zelo enostavnem in podrobnem vodniku po korakih. Če želite izvedeti več o usmerjevalniku Vue, obiščite usmerjevalnik Vue: Uradni dokumenti.