Implementujte směrovací systém pro vaši aplikaci s pomocí tohoto průvodce.
SvelteKit je framework pro vytváření webových aplikací všech velikostí, se skvělými vývojovými zkušenostmi a flexibilním souborovým směrováním. Rámec kombinuje výhody SEO a progresivních vylepšení jednostránkových aplikací s rychlou navigací v aplikacích vykreslených na straně serveru. Jednou z kritických vlastností SvelteKit je jeho směrovací systém.
Pochopení SvelteKit Routing
SvelteKit je framework postavený na vrcholu Svelte. V SvelteKit se směrování řídí systémem založeným na souborech. To znamená, že adresářová struktura vašich stránek určuje trasy vaší aplikace.
Chcete-li lépe porozumět systému směrování SvelteKit, nejprve vytvořte projekt SvelteKit. Chcete-li to provést, spusťte ve svém terminálu následující kód:
npm create svelte@latest my-app
Po spuštění výše uvedeného bloku kódu odpovíte na řadu výzev ke konfiguraci aplikace.
Dále nainstalujte potřebné závislosti pro váš projekt. Udělat toto CD do svého projektu a spusťte:
npm install
Otevřete projekt na vývojovém serveru spuštěním následujícího příkazu ve vašem terminálu:
npm run dev
Nyní bude váš projekt spuštěn http://localhost: 5173/. Když otevřete aplikaci na vašem vývojovém serveru, budete mít rozhraní podobné obrázku níže.
Kořenová cesta projektu ‘/’ odpovídá souboru s názvem +stránka.velká. Můžete najít +stránka.velká soubor za cestou k souboru; src/trasy ve vašem projektu.
Chcete-li vytvořit různé trasy v SvelteKit, můžete vytvořit složky ve vašem src/trasy adresář. Každá složka bude odpovídat jiné trase. Vygenerovat a +stránka.velká souboru v každé složce k definování obsahu této trasy.
<main>
<h2> This is the about page h2>
main>
Výše uvedený kód bude žít uvnitř +stránka soubor. Uvnitř vytvoříte štíhlý soubor o složku v src/trasy adresář. Tento soubor bude obsahovat obsah trasy. Chcete-li zobrazit trasu ve webovém prohlížeči, přejděte na http://localhost: 5173/asi.
Navigace na /about route zobrazí na obrazovce toto rozhraní:
Pochopení vnořených tras
Vnořené trasy představují způsob, jak strukturovat systém směrování ve webové aplikaci. Ve vnořené struktuře tras jsou trasy umístěny v rámci jiných tras, čímž se mezi nimi vytváří hierarchický vztah. V SvelteKit můžete vytvořit vnořené trasy umístěním složek s +stránka.velká soubor v jiných složkách trasy pod src/trasy adresář.
Například:
V tomto příkladu vnoříte pošta trasa v rámci blog trasa. K hnízdění pošta trasa v rámci blog trasu, vytvořit pošta složku a její +stránka.velká soubor uvnitř blog složku trasy.
Chcete-li získat přístup k trase blogu ve své aplikaci, otevřete webový prohlížeč a přejděte na http://localhost: 5173/blog.
Trasa pošty bude k dispozici na http://localhost: 5173/blog/příspěvek.
Rozvržení a chybové trasy
SvelteKit definuje a rozložení pro aplikaci podobným způsobem jako Next.js. Oba rámce používají a rozložení komponent pro definování struktury aplikace.
SvelteKit používá +layout.svelte k definování rozvržení pro skupinu stránek. Můžete vytvořit a +layout.svelte soubor v src/trasy adresář pro definování rozvržení pro všechny stránky ve vaší aplikaci nebo v podadresáři pro definování rozvržení pro určitou skupinu stránek.
Zde je příklad, jak definovat trasu rozložení pro celou vaši aplikaci:
Výše uvedený příklad poskytuje trasu rozvržení. Soubor obsahuje a h1 prvek, který zobrazuje text "Toto je aplikace SvelteKit." Zahrnuje také a slot živel. The slot element je speciální element, který definuje umístění, kde aplikace vykreslí obsah vašich tras v rámci layoutu. Funguje to stejně jako komponenty Vue.
V tomto případě vaše aplikace vykreslí obsah vašich tras pod h1 živel.
Chcete-li definovat chybovou stránku, vytvořte soubor s názvem +chyba.svelte v src/trasy adresář. Tato stránka se zobrazí, když během vykreslování dojde k chybě.
Například:
Když narazíte na chybu, například při navigaci na neexistující trasu, vaše aplikace se k této chybě vrátí chyba místo toho.
Například:
Cesta http://localhost: 5173/jít neexistuje, takže aplikace vykresluje chyba místo toho.
Navigace mezi stránkami
Nalezení nejlepšího způsobu navigace mezi trasami, které vytvoříte, je zásadní pro dobrý zážitek. Tradičně směrování založené na souborech ve většině technologií používá odkazy k navigaci mezi různými stránkami. K navigaci mezi stránkami v SvelteKitu můžete použít jednoduchý HTML tag kotvy.
Tento kód můžete například napsat do libovolné cesty, kterou chcete, ale měli byste jej napsat do rozložení trasa nad slot štítek:
<ul>
<li>
<ahref="/">Homea>
li>
<li>
<ahref="/about">Abouta>
li>
<li>
<ahref="/blog">Bloga>
li>
<li>
<ahref="/blog/post">Posta>
li>
ul>
Kliknutím na libovolnou kotvící značku se dostanete na odpovídající trasu.
Dynamické směrování v SvelteKit
Dynamické směrování umožňuje postupně vytvářet trasy, které aplikace generuje na základě dat nebo parametrů. Umožňuje vytvářet flexibilní a dynamické webové aplikace, které zpracovávají různé trasy a zobrazují obsah podle konkrétních dat nebo parametrů.
Chcete-li vytvořit dynamickou trasu v SvelteKit, vytvořte složku s názvem [slimák] a pak a +stránka.velká soubor ve složce k definování obsahu trasy. Složku můžete pojmenovat, jak chcete, ale ujistěte se, že název vždy zalomíte do hranatých závorek [ ].
Zde je příklad dynamické trasy:
Pro přístup k této trase ve vašem webovém prohlížeči přejděte na tento odkaz http://localhost: 5173/[slimák], kde [slimák] může být libovolný jedinečný nedefinovaný název trasy, který si vyberete.
Můžete přistupovat ke své aplikaci [slimák] parametr pomocí $page.params údaje z $app/stores.
Například:
<scriptlang='ts'>
import { page } from '$app/stores'const params = $page.params;
script>
<main>
<h1>This is the {params.slug} pageh1>
main>
Zde přiřadíte $page.params namítat proti param proměnná a vykreslit param.slug data ve vaší aplikaci.
Aplikace načte soubor param.slug údaje z vašeho odkazu. Pokud například navigujete do http://localhost: 5173/požár, bude obsah zobrazený v aplikaci "Toto je stránka ohně."
Nyní znáte základy směrování ve SvelteKitu
Směrování v SvelteKit je výkonná funkce, která vám umožňuje strukturovat vaši aplikaci způsobem, který dává smysl. Pochopení toho, jak tuto funkci používat, vám umožní vytvářet efektivnější a uživatelsky přívětivější webové aplikace. Ať už vytváříte malý osobní projekt nebo rozsáhlou aplikaci, směrovací systém SvelteKit má nástroje, které potřebujete k úspěchu.
