Útmutató a Vue Routerhez

Bevezetés

Amikor webalkalmazásokat fejleszt a Vue.js segítségével, kivéve, ha a Egyoldalas alkalmazás (SPA), akkor több oldalt szeretne egy céloldalhoz kapcsolni, hogy a felhasználók navigálhassanak rajtuk. Ez az úgynevezett routing.

Az útválasztás az a folyamat, amelynek során a felhasználó a webhely különböző oldalaira navigál. A Vue.js egy JavaScript-keretrendszer, amelyet egyoldalas alkalmazások létrehozására használnak, ami azt jelenti, hogy ez az alkalmazás csak egyszer töltődik be a szerverről a böngészőbe, és a böngészőnek nem kell újratöltenie az útválasztás során; ehelyett egyszerűen lekéri ezeket az oldalakat, és betöltődik.

Ebben az útmutatóban megtudjuk, hogyan kell útválasztást végrehajtani a Vue.js segítségével, és mélyrehatóan elmerülünk az útválasztás különféle típusaiban, amelyek elvégezhetők, és hogyan végezhetők el.

Elkezdeni

Az útválasztás a Vue.js-ben ezzel megtörtént vue router, amely párhuzamosan működik a Vue központi könyvtárával, lehetővé téve számunkra, hogy beállítsunk egy útválasztási rendszert. Szeretnénk használni vue-router projektünkben két forgatókönyvben. Vagy egy meglévő projektben szeretnénk használni az útválasztót, vagy hozzáadni egy új projekt létrehozásakor.

A Vue Router beállítása meglévő projektben

integrálása vue-router egy meglévő projektbe való beépítés technikai jellegű lehet, és most áttekintjük ezeket a részleteket. Az első lépés a vue útválasztó csomag telepítése a következő paranccsal:

! npm install vue-router@4

A telepítés után navigáljon a src mappát, és hozzon létre egy mappát router, amelyet egy fájl követ index.js a router mappát, amely a router konfigurációs fájljaként fog szolgálni. A miénk src a könyvtár most így fog kinézni:

A index.js fájlba, ügyeljünk arra, hogy beillesszük az alábbi kódot, amely a router konfigurációs kódja:

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

A Lajaecom webshop termékajánlataira routes tömb, amely egyetlen objektumot tartalmaz, amely több objektum is lehet, ahol minden objektum egyetlen útvonalat képvisel. Egyelőre csak azt hoztuk létre, amelyik átirányít a kezdőlap komponensre.

Mindegyik routes objektumok jellemzően a path, amely az url elérési útja a webhely gyökeréhez, a name, amely azonosítóként szolgál, és a component, amelyet az oldal tetején importáltunk.

Az útvonaltömbön kívül beállítjuk az útválasztó példányt alul az a. létrehozásával createRouter() funkció és átadás a history kulcsértékek és a routes tömböt, majd exportáljuk a router példa az alkalmazásunkon belüli használatra.

Az útválasztó konfigurációjának alkalmazásunkon belüli használatához nyissa meg a main.js fájl a src mappa, import router from "./router", majd adja hozzá .use(router) között createApp(App) és a .mount('#app') pont úgy, ahogy lent van:

import router from './router' createApp(App).use(router).mount('#app')

Ezt vue-router globálisan konfigurálva lett az alkalmazásunkon belül, és a következő lépés az alkalmazásunkon belüli használat. Ez könnyen megvalósítható beépítéssel <router-view /> belül App.js sablon címke, amely csak az egyező útvonalat jeleníti meg:

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>

Útvonalak beállítása a Vue.js-ben

Az útvonalakat általában a router/index.js fájl útvonalak tömbjét, és ezek az útvonalak csatlakoznak a komponensekhez. Jó gyakorlat egy nézetek mappát létrehozni, ahol az összes oldalnézet tárolódik. Például:

Ezen a ponton most már tudjuk, hogyan kell manuálisan beállítani az útvonalakat.

Telepítse a Vue Routert Vue CLI-vel

Ha új projektet készülünk létrehozni, és úgy gondoljuk, hogy ki fogjuk használni vue-router, ezt könnyebb megtenni a projekt létrehozásakor.

Nincs más dolgunk, mint a Vue CLI használatával telepíteni a legújabb verziót vue-router miközben manuálisan választja ki a funkciókat a projektünk létrehozása során:

Olvasson és tudjon meg többet a Vue.js projekt létrehozásáról a mi webhelyünkön keresztül Útmutató a Vue CLI-hez!

Lusta betöltési útvonalak a Vue Routerrel

Ahogy az alkalmazásunk mérete növekszik, a csomag mérete növekszik, így webhelyünk hosszabb ideig tart betölteni. Tudjuk használni vue-router a lusta betöltés megvalósításához, hogy elkerülje bizonyos útvonalak betöltését, amíg a felhasználó kifejezetten nem kéri őket.

Ez általában az útválasztó konfigurációs fájljában valósul meg a import utasítás tetején, és lecseréljük egy dinamikus import utasításra az útvonalunk komponens opciójában:

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

Navigálás az útvonalak között a segítségével

Eddig tudtunk útvonalakat létrehozni, de hogyan navigáljunk az alkalmazásunkon belül? Használjuk a <router-link> címke helyett a <a> elemet a HTML-ben az útválasztás kezeléséhez.

Például, ha navigációs sávot szeretnénk létrehozni az alkalmazásunk tetején, ezt megtehetjük a App.js feletti fájl <router-view/> címkével, hogy minden útvonalon megjelenjen:

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

A router-link elfogadja a to='path' attribútum, amely a felhasználót az útvonal konfigurálásakor beállított komponens elérési útjára viszi. Ez úgy működik, mint a href='path``' attribútum HTML-ben.

Elnevezett útvonalak használata

A megnevezett útvonalak használatával áthaladhatunk a name kulcs, amely hozzáfér a name tulajdonság, amelyet az útvonalak konfigurálásakor állítunk be, ahelyett, hogy az elérési utat használnánk az adatok ilyen módon történő összerendelésével:

<router-link :to="{ name: 'About' }">About</router-link>

One advantage of using this method is in case we decide to change the route path for our large applications, we don’t need to start changing all links path which could be cumbersome.

Dinamikus útválasztás

Előfordulhatnak olyan helyzetek, amelyek a szükségtelen oldalismétlések elkerülése érdekében dinamikus útválasztást tesznek szükségessé. Tegyük fel például, hogy van egy listánk a gyümölcsökről, és azt szeretnénk, hogy a felhasználó rá tudjon kattintani egy adott gyümölcsre, és csak a gyümölcs részletei jelenjenek meg a gyümölcs-részletek oldalon. Ebben az esetben dinamikus útválasztást használunk.

Két oldalunk lenne – az egyik a gyümölcsök listában való bemutatására, a másik pedig az egyes gyümölcsök részleteinek megjelenítésére, amely egy „tervrajz” oldal, amelyet a gyümölcs adataival kell kitölteni. Létrehozzuk az oldalakat a Vue mappában, majd hozzáadjuk az útvonalakat a routes sor:

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

Észre fogjuk venni, hogy a FruitDetails oldalt, hozzáadtunk egy dinamikus id ingatlan, így megkapja a id paramétert, és ezzel lekérdezi az adott oldalon megjelenő adatokat $route.params sablonunkban, így dinamikussá téve az útvonalat.

A FruitsPage, tegyük fel, hogy van egy sor gyümölcsünk, amelyet az alkalmazásunkba hurkolunk, az egyes gyümölcsöket a paraméterek mellett egy hivatkozással burkolhatjuk így:

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

Ezen a ponton, amikor a felhasználó rákattint az egyes gyümölcsökre, a következő helyre viszi őket FruitDetails oldal, ahol elérhetjük a id paramétert, és használja annak meghatározására, hogy melyik gyümölcs adatai jelenjenek meg a FruitDetails cimre.

Nyissa meg az útvonalparamétereket

Eddig láttuk, hogyan lehet dinamikusan átadni a paramétereket egy adott oldalnak, most nézzük meg, hogyan érhetjük el ezt a paramétert FruitDetails oldalon. Kétféleképpen érhetjük el a paramétereket a Vue-ban – via $route.params vagy kellékek felhasználásával:

<p></p> $route.params

A paraméterek közvetlenül elérhetők ezen keresztül $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

Vagy elérhetjük saját magunkon belül data() módszer segítségével this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>

A Vue Props használata

Egy másik egyszerű módszer az adatok dinamikus eléréséhez útvonalakon keresztül a kellékek használata. Először be kell állítanunk props nak nek true az útvonalak konfigurációs objektumában:

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

Így már csak annyit kell tennünk, hogy hozzáadjuk props opció a script címkét, majd használja a mi kellékeinket template címke:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

404-es hibák – Nem található útvonal

Abban az esetben, ha a felhasználó egy nem létező útvonalra navigál, a Vue betölti az oldalt, de minden összetevő nélkül, üres oldalt hozva létre. Ebben az esetben a legjobb, ha megjelenít egy 404-es oldalt, esetleg egy gombbal, amely a kezdőlapra vezeti őket, vagy bárhová, ahová úgy gondoljuk, hogy el szeretnének menni.

Ez könnyen kezelhető úgy, hogy létrehozunk egy komponenst a 404-es oldalunkhoz, majd hozzáadunk egy 404-es útvonalat a router konfigurációs fájlunk routes tömbjéhez, de ezúttal egy reguláris kifejezést fogunk használni az összes korábban nem deklarált útvonal megkeresésére:

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

A :catchAll az a dinamikus szegmens, amely reguláris kifejezését kapja (.*) amelyben a Vue Router annak ellenőrzésére használja, hogy a felhasználó által navigált útvonal meg van-e definiálva az útválasztó konfigurációs fájljában. Ha ilyen útvonalak nem léteznek, akkor a felhasználót a komponenshez irányítja, ami esetünkben a ErrorPage összetevő:

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

Átirányítások

Olyan helyzetben, amikor azt szeretnénk, hogy a felhasználók egy adott útvonal meglátogatásakor át legyenek irányítva, például ha volt egy korábbi útvonalunk, amelyet már nem használunk, akkor azt szeretnénk, hogy a felhasználók az új útvonalra legyenek irányítva, amikor meglátogatják azt az útvonalat. Ez könnyen megvalósítható, ha új objektumot adunk az útvonalak konfigurációs tömbjéhez, a redirect terület:

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

A fenti kód mindössze annyit tesz, hogy ha egy felhasználó felkeresi, akkor az elérési út /all-fruits, átirányítaná őket a /fruits útvonalon.

Programozott navigáció

Eddig sokat tanultunk az útválasztásról, de van még egy dolog, amit tudnia kell: hogyan kell végrehajtani a programozott navigációt. A programozott navigációt úgy definiáljuk, mint egy olyan helyzetet, amelyben a felhasználót egy adott útvonalon végrehajtott művelet, például bejelentkezési vagy regisztrációs művelet alapján, vagy egy adott gombra, például egy „vissza” gombra kattintva irányítják át/irányítják.

Router története

A böngészési előzmények segítségével könnyedén navigálhatunk hátra vagy előre, preferenciánknak megfelelően. Ha emlékszel, van egy createRouter() függvényt a router konfigurációs fájljában, ahol beállítjuk a history érték, lehetővé téve a Vue router számára, hogy nyomon kövesse a router előzményeit, miközben a webalkalmazáson keresztül haladunk.

Ez lehetővé teszi a böngésző előzményeinek bejárását egy feltételes feltétel, például egy gombkattintás alapján:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

Dönthetünk úgy is, hogy továbblépünk a 1 helyett -1 és tegyük fel, hogy 2 lépést akarunk haladni, bármelyiket használhatjuk 2 or -2.

Nyomja

push() jellemzően egy művelet megtörténte után használatos, és új bejegyzést ad az előzményveremhez. Például, ha egy felhasználó sikeresen bejelentkezik, szeretnénk, ha programozottan navigálnának az irányítópult oldalára. Ez úgy érhető el, hogy az útvonal neve mellé a push metódust is beillesztjük:

this.$router.push({ name: 'Dashboard' });

Következtetés

Az útválasztás a Vue egyik alapvető funkciója. Hacsak nem épít a Egyoldalas alkalmazás (SPA), akkor több oldalt szeretne összekapcsolni egy céloldallal, hogy a felhasználók navigálhassanak rajtuk.

Ebben az útmutatóban megvizsgáltuk, mi az útválasztás, hogyan telepítheti a vue-router az új és a meglévő projektekben, hogyan kell végrehajtani a lusta betöltést, navigálni az útvonalak között, végrehajtani a dinamikus útválasztást, elérni az útvonalparamétereket és végrehajtani a programozott navigációt.

• Coinsmart. Európa legjobb Bitcoin- és kriptográfiai tőzsdéje.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. SZABAD HOZZÁFÉRÉS.
• CryptoHawk. Altcoin radar. Ingyenes próbaverzió.
• Source: https://stackabuse.com/guide-to-vue-router/