Vue.js Router

Vue.A js egy reaktív javascript keretrendszer, amelyet UI-k (felhasználói interfészek) és SPA-k (egyoldalas alkalmazások) felépítésére használnak, és a fejlesztők szeretnek kódolni, és érzik a szabadságot és kényelmet, miközben fejlesztenek alkalmazásokat a Vue-ban.js. Útválasztási célokra Vue.A js nem biztosítja a beépített útválasztási funkciót. De van egy hivatalos, harmadik féltől származó könyvtár, a Vue Router nevével a funkció biztosításához. Ennek a szolgáltatásnak a használatával navigálhatunk a weboldalak között, de újratöltés nélkül. Tehát ebben a cikkben megnézzük, hogyan telepíthetjük és használhatjuk a Vue Routert a Vue-ban.js.

Telepítés

Telepíthetjük a Vue útválasztót egy meglévő Vue-ba.js a következő parancs futtatásával a terminálon

npm telepítse a vue-routert

A sikeres telepítés után be kell importálnunk a VueRoutert.js fájlt az src könyvtárban, valamint a következő szintaxist használva

importálja a Vue-t a „vue” -ból
router importálása innen:./ router '
Vue.use (router)

Az útválasztó importálása után jó, ha a projektben használja a vue-routert.

De ha a Vue-t telepíti.js a Vue CLI használatával. Erre a telepítési lépésre nincs szükség. Az előre beállított beállítás kiválasztása során hozzáadhat egy vue-router bővítményt.

Használat

A vue-router használata nagyon egyszerű és könnyen használható. Először a sablonban vagy a HTML-ben

Ebben a meglehetősen egyszerű és világos példában a vue-router. Egyszerű navigációt hoztunk létre az útválasztó-link összetevőinek felhasználásával, és a linket a '. A router-link ugyanúgy működik, mint egy „a” horgony címke. Alapértelmezés szerint valójában „a” címkeként jelenik meg. A router nézetben megkapjuk az útvonalnak megfelelő relatív komponenst.

A javascriptben először regisztrálnunk és importálnunk kell az összetevőket az útvonaluk meghatározásához. Feltételezzük, hogy van egy Comp nevű komponensünk.vue a nézetek könyvtárban, ahová importálni fogjuk az útválasztó indexét.js fájlt az útválasztó könyvtárában, és határozza meg útvonalként.

Komponens importálásához a következő állítást használjuk

importálja a "… / nézetek / Összeáll.vue ";

Az importálás után meg kell határoznunk az útvonalat, és feltérképezzük az összetevőhöz. Mint ez,

konst útvonalak = [

pálya: "/",
név: "Comp",
komponens: Comp

];

Több útvonalat is megadhatunk vesszővel elválasztva. Mint ez,

konst útvonalak = [

pálya: "/",
név: "Comp",
komponens: Comp
,

elérési út: "/ comp2",
név: "Comp2",
komponens: Comp2

];

Az útvonalak meghatározása után. Adja át az útvonal tömböt az útválasztó példányainak. Tehát hozzuk létre a router példányt is

const router = createRouter (
útvonalak // röviden: „útvonalak: útvonalak”
);

Végül a fő.js fájl. Létre kell hoznunk a gyökérpéldányt, és ezt is be kell illesztenünk, és be kell fecskendeznünk az útvonalakat, hogy az egész alkalmazás tudomást szerezzen az útvonalakról.

createApp (alkalmazás)
.use (router)
.mount ("# app");

Ennek az injekciós technikának az alkalmazásával. Bármelyik összetevőből elérhetjük az útválasztót a ez.$ router.

Most már programozottan nyomhatjuk az útvonalakat egy gombnyomásra vagy bármi másra, amit csak akar, ahelyett, hogy a router-link komponenst használnánk. Például,

módszerek:
clickFunc ()
ez.$ router.nyomás ('/ körülbelül')

Összegzés és összefoglalás

Ebben a cikkben megtanultuk a Vue Router különböző módokon történő telepítését, és megtanultuk a Vue router programozott használatát a javascriptben és a Vue programban.js sablonja. Megtanultuk azt is, hogy a Vue Routert egy meglévő projektben állítsuk be nagyon egyszerű és lépésről lépésre részletes útmutatóban. Ha többet szeretne megtudni a Vue Routerről, keresse fel a Vue Router: Official Docs oldalt.