Phenquestions
Vue.„js“ yra reaktyvi „javascript“ sistema, naudojama kuriant vartotojo sąsajas (vartotojo sąsajas) ir SPA (vieno puslapio programas), o kūrėjai mėgsta koduoti ir jausti laisvę bei patogumą kurdami programas „Vue“.js. Maršrutavimo tikslais „Vue“.js neteikia integruoto maršruto parinkimo. Tačiau šiai funkcijai suteikti yra oficiali trečiųjų šalių biblioteka su „Vue Router“ pavadinimu. Naudodamiesi šia funkcija mes galime naršyti tarp tinklalapių, bet neperkraunami. Taigi, šiame straipsnyje mes pamatysime, kaip mes galime įdiegti ir naudoti „Vue Router“ programoje „Vue“.js.
Montavimas
Mes galime įdiegti „Vue“ maršrutizatorių į esamą „Vue“.js projektas vykdant šią komandą terminale
npm įdiegti „vue-router“Po sėkmingo diegimo turime importuoti „VueRouter“ iš esmės.js failą src kataloge, taip pat naudojant šią sintaksę
importuoti „Vue“ iš „vue“importuoti maršrutizatorių iš './ router '
Vue.naudoti (maršrutizatorius)
Importavę maršrutizatorių, gerai eikite ir naudokite „vue-router“ savo projekte.
Bet jei diegiate „Vue“.js naudojant „Vue CLI“. Jums nereikės šio papildomo diegimo veiksmo. Pasirinkdami išankstinį nustatymą, galite pridėti „vue-router“ papildinį.
Naudojimas
„Vue-router“ naudojimas yra labai paprastas ir paprastas naudoti. Pirma, šablone ar HTML
Šiame gana paprastame ir aiškiame „vue-router“ pavyzdyje. Sukūrėme paprastą navigaciją naudodami maršrutizatoriaus nuorodos komponentus ir pateikiame nuorodą naudodami „to“ pavadinimą. Maršrutizatoriaus saitas veikia taip pat, kaip inkaro „a“ žyma. Pagal numatytuosius nustatymus ji iš tikrųjų pateikiama kaip „a“ žyma. Maršrutizatoriaus rodinyje turėsime santykinį komponentą, atitinkantį maršrutą.
„Javascript“ pirmiausia turime užregistruoti ir importuoti komponentus, kad apibrėžtume jų maršrutus. Manome, kad turime komponentą pavadinimu Comp.vue rodinių kataloge, į kurį importuosime maršrutizatoriaus rodyklėje.js failą maršrutizatoriaus kataloge ir apibrėžkite jį kaip maršrutą.
Norėdami importuoti komponentą, naudojame šį sakinį
importuoti komp. iš „… / rodinių / komp.vue ";Importavę turime nustatyti maršrutą dabar ir susieti jį su komponentu. Kaip šitas,
konst maršrutai = [kelias: „/“,
pavadinimas: „Comp“,
komponentas: komp
];
Mes taip pat galime pateikti kelis maršrutus, atskirti kableliu. Kaip šitas,
konst maršrutai = [kelias: „/“,
pavadinimas: „Comp“,
komponentas: komp
,
kelias: "/ comp2",
pavadinimas: „Comp2“,
komponentas: Comp2
];
Apibrėžus maršrutus. Perduokite maršrutų masyvą į maršrutizatoriaus egzempliorius. Taigi, sukurkime ir maršrutizatoriaus egzempliorių
const maršrutizatorius = createRouter (maršrutai // trumpas žodis „maršrutai: maršrutai“
);
Galų gale, iš esmės.js failas. Turime sukurti šakninį egzempliorių ir jį taip pat prijungti bei įterpti į jį maršrutus, kad visa programa sužinotų apie maršrutus.
„createApp“ (programa).naudoti (maršrutizatorius)
.kalnas („# app“);
Naudojant šią injekcijos techniką. Mes galime pasiekti maršrutizatorių naudodami bet kurį komponentą tai.$ maršrutizatorius.
Dabar galime programiškai stumti maršrutus spustelėdami mygtuką ar bet ką, ko norite, užuot naudoję maršrutizatoriaus nuorodos komponentą. Pavyzdžiui,
metodai:clickFunc ()
tai.$ maršrutizatorius.stumti ('/ apie')
Apibendrinimas ir santrauka
Šiame straipsnyje mes išmokome įdiegti „Vue Router“ įvairiais būdais ir išmokome programiškai naudoti „Vue“ maršrutizatorių „javascript“ ir „Vue“.js šablonas. Mes taip pat išmokome labai lengvai ir nuosekliai išsamioje instrukcijoje nustatyti „Vue Router“ esamame projekte. Jei norite sužinoti daugiau apie „Vue Router“, apsilankykite „Vue Router: Official Docs“.
