Phenquestions
Vue.js ir reaktīvs javascript ietvars, ko izmanto, lai izveidotu lietotāja saskarnes (lietotāja saskarnes) un SPA (vienas lapas lietojumprogrammas), un izstrādātāji mīl kodēt un izjust brīvību un komfortu, izstrādājot lietojumprogrammas Vue.js. Maršrutēšanas nolūkos Vue.js nenodrošina iebūvēto maršrutēšanas funkciju. Šīs funkcijas nodrošināšanai ir oficiāla trešās puses bibliotēka ar nosaukumu Vue Router. Izmantojot šo funkciju, mēs varam pārvietoties starp tīmekļa lapām, bet bez pārlādēšanas. Tātad, šajā rakstā mēs redzēsim, kā mēs varam instalēt un izmantot Vue Router Vue.js.
Uzstādīšana
Mēs varam instalēt Vue maršrutētāju esošajā Vue.js projekts, izpildot šādu komandu terminālā
npm instalējiet vue maršrutētājuPēc veiksmīgas instalēšanas mums galvenokārt jāimportē VueRouter.js failu src direktorijā, kā arī izmantojot šādu sintaksi
importēt Vue no “vue”importēt maršrutētāju no./ router '
Vue.izmantot (maršrutētājs)
Pēc maršrutētāja importēšanas jums ir labi iet un projektā izmantot vue-router.
Bet, ja jūs instalējat Vue.js izmantojot Vue CLI. Šis papildu instalēšanas solis jums nebūs vajadzīgs. Preset izvēles laikā varat pievienot vue-router spraudni.
Lietošana
Vue-maršrutētāja izmantošana ir ļoti vienkārša un viegli lietojama. Pirmkārt, veidnē vai HTML
Šajā diezgan vienkāršajā un skaidrajā vue-router piemērā. Mēs esam izveidojuši vienkāršu navigāciju, izmantojot maršrutētāja saites komponentus, un saiti nodrošinām, izmantojot rekvizītu ar nosaukumu “uz”. Maršrutētāja saite darbojas tāpat kā enkura 'a' atzīme. Pēc noklusējuma tas faktiski tiek atveidots kā “a” tags. Maršrutētāja skatā mums būs relatīvais komponents, kas atbilst maršrutam.
Javascript vispirms ir jāreģistrējas un jāimportē komponenti, lai noteiktu to maršrutus. Mēs pieņemam, ka mums ir komponents ar nosaukumu Comp.vue skatu direktorijā, uz kuru mēs importēsim maršrutētāja indeksā.js failu maršrutētāja direktorijā un definējiet to kā maršrutu.
Lai importētu komponentu, mēs izmantojam šādu paziņojumu
importēt Comp no "... / views / Comp.vue ";Pēc importēšanas mums tagad ir jādefinē maršruts un jāpiesaista tas komponentam. Kā šis,
konst maršruti = [ceļš: "/",
nosaukums: "Comp",
komponents: Comp
];
Mēs arī varam norādīt vairākus maršrutus, atdalot tos ar komatu. Kā šis,
konst maršruti = [ceļš: "/",
nosaukums: "Comp",
komponents: Comp
,
ceļš: "/ comp2",
nosaukums: "Comp2",
komponents: Comp2
];
Pēc maršrutu noteikšanas. Pass maršrutu masīvs maršrutētāja gadījumiem. Tātad, izveidosim arī maršrutētāja gadījumu
const router = createRouter (maršruti // saīsinājums no: maršruti: maršruti
);
Galu galā galvenajā.js fails. Mums ir jāizveido saknes instance un jāpiestiprina tā, kā arī jāinjicē tajā maršruti, lai visa lietotne uzzinātu par maršrutiem.
createApp (lietotne).izmantot (maršrutētājs)
.stiprinājums ("# app");
Izmantojot šo injekcijas tehniku. Mēs varam piekļūt maršrutētājam jebkurā komponentā, izmantojot šo.$ maršrutētājs.
Tagad mēs varam programmiski virzīt maršrutus, noklikšķinot uz pogas vai jebkura cita vajadzīgā, tā vietā, lai izmantotu maršrutētāja saites komponentu. Piemēram,
metodes:clickFunc ()
šo.$ maršrutētājs.push ('/ par')
Iesaiņošana un kopsavilkums
Šajā rakstā mēs esam iemācījušies instalēt Vue maršrutētāju, izmantojot dažādus veidus, un iemācījāmies programmatiski izmantot Vue maršrutētāju javascript un Vue.js veidne. Mēs esam iemācījušies arī izveidot Vue Router esošā projektā ļoti vienkāršā un detalizētā detalizētā rokasgrāmatā. Ja vēlaties uzzināt vairāk par Vue Router, lūdzu, apmeklējiet vietni Vue Router: Official Docs.
