Phenquestions
Vue.js on reaktiivne javascripti raamistik, mida kasutatakse kasutajaliideste (kasutajaliidesed) ja SPA-de (ühelehelised rakendused) loomiseks ning arendajad armastavad Vue rakendusi arendades kodeerida ning tunnevad vabadust ja mugavust.js. Marsruutimise eesmärgil Vue.js ei paku sisseehitatud marsruutimisfunktsiooni. Selle funktsiooni pakkumiseks on olemas ametlik kolmanda osapoole raamatukogu, mille nimi on Vue Router. Selle funktsiooni abil saame navigeerida veebilehtede vahel, kuid seda uuesti laadimata. Niisiis näeme selles artiklis, kuidas saaksime Vue ruuterit Vue-s installida ja kasutada.js.
Paigaldamine
Saame Vue ruuteri installida olemasolevasse Vue.js projekt käivitades terminalis järgmise käsu
npm installige vue-ruuterPärast edukat installimist peame põhiliselt importima VueRouteri.js-fail ka src-kataloogis, kasutades järgmist süntaksit
importige Vue 'vue'stimportige ruuter asukohast './ ruuter '
Vue.kasutamine (ruuter)
Pärast ruuteri importimist on hea minna ja oma projektis kasutada vue-ruuterit.
Aga kui installite Vue.js kasutades Vue CLI-d. Te ei vaja seda täiendavat installimisetappi. Eelseadistuse valimisel saate lisada Vue-ruuteri pistikprogrammi.
Kasutamine
Vue-ruuteri kasutamine on väga lihtne ja hõlpsasti kasutatav. Esiteks mallis või HTML-is
Selles üsna lihtsas ja selges vue-ruuteri näites. Oleme loonud lihtsa navigeerimise, kasutades ruuteri lingi komponente, ja pakume lingi, kasutades rekvisiiti nimega 'to'. Ruuteri link töötab samamoodi nagu ankur "a" silt. Tegelikult renderdatakse see vaikimisi a-märgendina. Ruuterivaates on meil marsruudile vastav suhteline komponent.
Javascriptis peame kõigepealt registreerima ja importima komponendid, et määratleda nende marsruudid. Oletame, et meil on komponent nimega Comp.vue kataloogis vaated, kuhu me ruuteri indeksisse impordime.js-fail ruuteri kataloogis ja määrake see marsruudina.
Komponendi importimiseks kasutame järgmist lauset
impordi Comp kataloogist "... / views / Comp.vue ";Pärast importimist peame nüüd marsruudi määratlema ja selle komponendiga kaardistama. Nagu nii,
konst marsruudid = [tee: "/",
nimi: "Comp",
komponent: komp
];
Võime anda ka mitu marsruuti, eraldatuna komaga. Nagu nii,
konst marsruudid = [tee: "/",
nimi: "Comp",
komponent: komp
,
tee: "/ comp2",
nimi: "Comp2",
komponent: Comp2
];
Pärast marsruutide määratlemist. Pass marsruudid ruuteri eksemplaridele. Niisiis, loome ka ruuteri eksemplari
const ruuter = createRouter (marsruudid // lühidalt marsruudile
);
Lõpuks põhiliselt.js-fail. Peame looma juurprotokolli ja ka selle installima ning sisestama marsruudid sellesse, et kogu rakendus saaks marsruutidest teadlik.
createApp (rakendus).kasutamine (ruuter)
.mount ("# app");
Kasutades seda süstimistehnikat. Me pääseme ruuterile juurde mis tahes komponendis, kasutades seda.$ ruuter.
Nüüd saame marsruute programmiliselt lükata ühe nupuvajutusega või mida iganes soovite, selle asemel, et kasutada ruuteri-lingi komponenti. Näiteks,
meetodid:clickFunc ()
seda.$ ruuter.suruma ('/ umbes')
Kokkuvõte ja kokkuvõte
Selles artiklis oleme õppinud Vue ruuterit installima erinevatel viisidel ja õppinud Vue ruuterit programmiliselt kasutama javascriptis ja Vue'is.js mall. Samuti oleme õppinud Vue ruuterit olemasolevas projektis väga lihtsas ja samm-sammult üksikasjalikus juhendis seadistama. Kui soovite Vue ruuteri kohta lisateavet saada, külastage palun Vue Router: Official Docs.
