Útmutató az útválasztáshoz a SvelteKitben

A SvelteKit egy keretrendszer bármilyen méretű webes alkalmazások készítésére, nagy fejlesztési tapasztalattal és rugalmas fájlalapú útválasztással. A keretrendszer egyesíti az egyoldalas alkalmazások SEO és a fokozatos fejlesztés előnyeit a szerveroldali megjelenített alkalmazások gyors navigációjával. A SvelteKit egyik kritikus jellemzője az útválasztási rendszere.

A SvelteKit útválasztás megértése

A SvelteKit egy keretrendszer Svelte tetejére épült. A SvelteKitben az útválasztás fájlalapú rendszert követ. Ez azt jelenti, hogy az oldalak könyvtárstruktúrája határozza meg az alkalmazás útvonalait.

A SvelteKit útválasztási rendszer jobb megértéséhez először hozzon létre egy SvelteKit projektet. Ehhez futtassa a következő kódot a terminálon:

npm create svelte@latest my-app

A fenti kódblokk futtatása után egy sor kérdésre válaszol az alkalmazás konfigurálásához.

Ezután telepítse a projekthez szükséges függőségeket. Ezt csináld meg CD be a projektbe, és futtassa:

npm install

Nyissa meg a projektet a fejlesztői kiszolgálón a következő parancs futtatásával a terminálon:

npm run dev

Most a projektje elindul és fut http://localhost: 5173/. Amikor megnyitja az alkalmazást a fejlesztői szerveren, az alábbi képhez hasonló felületet kap.

A projekt gyökérútvonala ‘/’ nevű fájlnak felel meg +oldal.karcsú. Megtalálhatja a +oldal.karcsú fájl a fájl elérési útját követi; src/routes a projektedben.

Ha különböző útvonalakat szeretne létrehozni a SvelteKitben, mappákat hozhat létre saját mappájában src/routes Könyvtár. Minden mappa más útvonalnak felel meg. Generáljon a +oldal.karcsú fájlt minden mappában az útvonal tartalmának meghatározásához.

<main>
<h2> This is the about page h2>
main>

A fenti kód benne fog élni +oldal fájlt. Létrehoz egy karcsú fájlt a ról ről mappában a src/routes Könyvtár. Ez a fájl tartalmazza az útvonal tartalmát. Az útvonal webböngészőjében való megtekintéséhez navigáljon ide http://localhost: 5173/kb.

Navigálás a /about Az útvonal ezt a felületet jeleníti meg a képernyőn:

A beágyazott útvonalak megértése

A beágyazott útvonalak az útválasztási rendszer webalkalmazásban történő felépítésének egyik módja. Egy beágyazott útvonalszerkezetben az útvonalak más útvonalakon belül helyezkednek el, hierarchikus kapcsolatot hozva létre közöttük. A SvelteKitben beágyazott útvonalakat hozhat létre, ha mappákat helyez el a +oldal.karcsú alatt található egyéb útvonalmappákban található fájl src/routes Könyvtár.

Például:

Ebben a példában beágyazza a hozzászólás útvonalon belül blog útvonal. A beágyazáshoz a hozzászólás útvonalon belül blog útvonalat, hozza létre a hozzászólás mappa és annak +oldal.karcsú fájl belsejében blog útvonal mappa.

A blog útvonalának eléréséhez az alkalmazásban nyissa meg a webböngészőt, és navigáljon ide http://localhost: 5173/blog.

A posta útvonala a címen lesz elérhető http://localhost: 5173/blog/bejegyzés.

Elrendezések és hibaútvonalak

A SvelteKit meghatározza a az alkalmazás elrendezését a Next.js-hez hasonló módon. Mindkét keretrendszer a elrendezés összetevőt az alkalmazás szerkezetének meghatározásához.

A SvelteKit a +elrendezés.karcsú oldalcsoport elrendezésének meghatározásához. Létrehozhat a +elrendezés.karcsú fájl a src/routes könyvtárat az alkalmazás összes oldalának elrendezésének meghatározásához, vagy egy alkönyvtárban egy adott oldalcsoport elrendezésének meghatározásához.

Íme egy példa arra, hogyan határozhat meg egy elrendezési útvonalat a teljes alkalmazáshoz:

A fenti példa egy elrendezési útvonalat mutat be. A fájl tartalmazza a h1 elem, amely megjeleníti a szöveget "Ez egy SvelteKit alkalmazás." Ide tartozik még a rés elem. A rés Az elem egy speciális elem, amely meghatározza azt a helyet, ahol az alkalmazás megjeleníti az útvonalak tartalmát az elrendezésen belül. Ugyanúgy működik, mint a Vue összetevői.

Ebben az esetben az alkalmazás az útvonalak tartalmát a alatt jeleníti meg h1 elem.

A hibaoldal meghatározásához hozzon létre egy nevű fájlt +hiba.karcsú ban,-ben src/routes Könyvtár. Ez az oldal akkor jelenik meg, ha hiba történik a renderelés során.

Például:

Ha hibába ütközik, például egy nem létező útvonalra navigál, az alkalmazás visszaáll erre hiba útvonal helyett.

Például:

Az út http://localhost: 5173/go nem létezik, ezért az alkalmazás megjeleníti a hiba útvonal helyett.

Navigálás az oldalak között

Az Ön által létrehozott útvonalak közötti navigáció legjobb módja megtalálása elengedhetetlen a jó élményhez. Hagyományosan a legtöbb technológia fájlalapú útválasztása hivatkozásokat használ a különböző oldalak közötti navigáláshoz. A SvelteKit oldalai közötti navigáláshoz használhat egy egyszerű HTML horgonycímkét.

Például beírhatja ezt a kódot bármely kívánt útvonalra, de be kell írnia a elrendezés feletti útvonalon rés címke:

<ul>
<li>
<ahref="/">Homea>
li>
<li>
<ahref="/about">Abouta>
li>
<li>
<ahref="/blog">Bloga>
li>
<li>
<ahref="/blog/post">Posta>
li>
ul>

Bármely horgonycímkére kattintva a megfelelő útvonalra navigál.

Dinamikus útválasztás a SvelteKitben

A dinamikus útválasztás lehetővé teszi, hogy fokozatosan hozzon létre útvonalakat, amelyeket az alkalmazás adatok vagy paraméterek alapján hoz létre. Lehetővé teszi rugalmas és dinamikus webalkalmazások létrehozását, amelyek különböző útvonalakat kezelnek és tartalmat jelenítenek meg meghatározott adatok vagy paraméterek szerint.

Ha dinamikus útvonalat szeretne létrehozni a SvelteKitben, hozzon létre egy nevű mappát [meztelen csiga] majd a +oldal.karcsú fájlt a mappában az útvonal tartalmának meghatározásához. Ne feledje, hogy a mappát tetszőleges néven nevezheti el, de ügyeljen arra, hogy a nevet mindig zárójelben [ ] tegye.

Íme egy példa egy dinamikus útvonalra:

Az útvonal eléréséhez webböngészőjében navigáljon erre a hivatkozásra http://localhost: 5173/[csiga], ahol [meztelen csiga] lehet bármilyen egyedi, meghatározatlan útvonalnév, amelyet választott.

Hozzáférhet az alkalmazásához [meztelen csiga] paraméter segítségével $page.params adatok innen $app/stores.

Például:

<scriptlang='ts'>
 import { page } from '$app/stores'
 const params = $page.params;
script>
<main>
<h1>This is the {params.slug} pageh1>
main>

Itt hozzárendelheti a $page.params tiltakozik a param változót, és jelenítse meg a param.slug adatokat az alkalmazásában.

Az alkalmazás lekéri a param.slug adatok a linkedből. Például, ha ide navigál http://localhost: 5173/tűz, az alkalmazáson megjelenő tartalom lesz – Ez a tűz oldala.

Most már ismeri az útválasztás alapjait a SvelteKitben

Az útválasztás a SvelteKitben egy hatékony funkció, amely lehetővé teszi az alkalmazás ésszerű felépítését. A funkció használatának megértése hatékonyabb és felhasználóbarátabb webalkalmazások létrehozását teszi lehetővé. Akár egy kis személyes projektet, akár egy nagyszabású alkalmazást hoz létre, a SvelteKit útválasztási rendszere rendelkezik a sikerhez szükséges eszközökkel.