Implementirajte sustav usmjeravanja za svoju aplikaciju uz pomoć ovog vodiča.
SvelteKit je okvir za izradu web aplikacija svih veličina, s velikim razvojnim iskustvom i fleksibilnim usmjeravanjem na temelju datoteka. Okvir kombinira prednosti SEO-a i progresivnog poboljšanja aplikacija na jednoj stranici s brzom navigacijom aplikacija prikazanih na strani poslužitelja. Jedna od kritičnih značajki SvelteKita je njegov sustav usmjeravanja.
Razumijevanje SvelteKit usmjeravanja
SvelteKit je okvir izgrađen na vrhu Svelte. U SvelteKit-u, usmjeravanje slijedi sustav temeljen na datotekama. To znači da struktura direktorija vaših stranica određuje rute vaše aplikacije.
Da biste bolje razumjeli SvelteKit sustav usmjeravanja, prvo izradite SvelteKit projekt. Da biste to učinili, pokrenite sljedeći kod na svom terminalu:
npm create svelte@latest my-app
Nakon pokretanja gornjeg bloka koda, odgovorit ćete na niz upita za konfiguraciju svoje aplikacije.
Zatim instalirajte potrebne ovisnosti za svoj projekt. Uraditi ovo CD u svoj projekt i pokrenite:
npm install
Otvorite projekt na razvojnom poslužitelju pokretanjem sljedeće naredbe na svom terminalu:
npm run dev
Sada će vaš projekt biti spreman za rad http://localhost: 5173/. Kada otvorite aplikaciju na svom razvojnom poslužitelju, imat ćete sučelje slično slici ispod.
Osnovna ruta projekta ‘/’ odgovara datoteci pod nazivom +stranica.svelte. Možete pronaći +stranica.svelte datoteka koja slijedi put datoteke; src/rute u vašem projektu.
Za stvaranje različitih ruta u SvelteKit-u, možete stvoriti mape u svom src/rute imenik. Svaka će mapa odgovarati drugoj ruti. Generirajte a +stranica.svelte datoteku u svakoj mapi za definiranje sadržaja te rute.
<main>
<h2> This is the about page h2>
main>
Gornji kod će živjeti unutar +stranica datoteka. Stvorit ćete vitku datoteku unutar oko mapu u src/rute imenik. Ova datoteka će sadržavati sadržaj za rutu. Za pregled rute u svom web-pregledniku idite na http://localhost: 5173/oko.
Navigacija do /about ruta će prikazati ovo sučelje na vašem ekranu:
Razumijevanje ugniježđenih ruta
Ugniježđene rute način su strukturiranja sustava usmjeravanja u web aplikaciji. U strukturi ugniježđene rute, rute su smještene unutar drugih ruta, stvarajući hijerarhijski odnos između njih. Možete stvoriti ugniježđene rute u SvelteKit-u postavljanjem mapa s +stranica.svelte datoteku unutar drugih mapa rute pod src/rute imenik.
Na primjer:
U ovom primjeru ugniježdite objaviti ruta unutar blog ruta. Ugnijezditi se objaviti ruta unutar blog ruta, stvorite objaviti mapa i njezina +stranica.svelte datoteka unutar blog mapa rute.
Da biste pristupili ruti bloga u svojoj aplikaciji, otvorite web preglednik i idite na http://localhost: 5173/blog.
Ruta pošte bit će dostupna na http://localhost: 5173/blog/post.
Izgledi i rute grešaka
SvelteKit definira a izgled za aplikaciju na sličan način kao Next.js. Oba okvira koriste a raspored komponenta za definiranje strukture aplikacije.
SvelteKit koristi +izgled.svelte za definiranje izgleda za grupu stranica. Možete stvoriti a +izgled.svelte datoteka u src/rute imenik za definiranje izgleda za sve stranice u vašoj aplikaciji ili u poddirektoriju za definiranje izgleda za određenu grupu stranica.
Evo primjera kako definirati rutu izgleda za cijelu aplikaciju:
Gornji primjer pruža rutu izgleda. Datoteka sadrži a h1 element koji prikazuje tekst "Ovo je SvelteKit aplikacija." Također uključuje a utor element. The utor element je poseban element koji definira lokaciju na kojoj će aplikacija prikazati sadržaj vaših ruta unutar izgleda. Radi na isti način kao i Vue komponente.
U tom će slučaju vaša aplikacija prikazati sadržaj vaših ruta ispod h1 element.
Da biste definirali stranicu pogreške, stvorite datoteku pod nazivom +pogreška.svelte u src/rute imenik. Ova će se stranica prikazati kada dođe do pogreške tijekom iscrtavanja.
Na primjer:
Kada naiđete na pogrešku, kao što je navigacija do nepostojeće rute, vaša će se aplikacija vratiti na ovu greška ruta umjesto toga.
Na primjer:
Put http://localhost: 5173/kreni ne postoji, pa aplikacija prikazuje greška ruta umjesto toga.
Kretanje između stranica
Pronalaženje najboljeg načina za navigaciju između ruta koje stvorite ključno je za dobro iskustvo. Tradicionalno, usmjeravanje temeljeno na datotekama u većini tehnologija koristi veze za navigaciju između različitih stranica. Za navigaciju između stranica u SvelteKit-u možete koristiti jednostavnu HTML oznaku sidra.
Na primjer, ovaj kod možete napisati bilo kojom rutom koju želite, ali trebali biste ga napisati u raspored ruta iznad utor označiti:
<ul>
<li>
<ahref="/">Homea>
li>
<li>
<ahref="/about">Abouta>
li>
<li>
<ahref="/blog">Bloga>
li>
<li>
<ahref="/blog/post">Posta>
li>
ul>
Klikom na bilo koju oznaku sidra vodit ćete do odgovarajuće rute.
Dinamičko usmjeravanje u SvelteKit-u
Dinamičko usmjeravanje omogućuje postupno stvaranje ruta koje aplikacija generira na temelju podataka ili parametara. Omogućuje vam stvaranje fleksibilnih i dinamičnih web aplikacija koje obrađuju različite rute i prikazuju sadržaj prema određenim podacima ili parametrima.
Za izradu dinamičke rute u SvelteKitu, stvorite mapu pod nazivom [puž] a zatim a +stranica.svelte datoteku u mapi za definiranje sadržaja rute. Imajte na umu da mapu možete nazvati kako god želite, ali naziv uvijek stavite u zagrade [ ].
Evo primjera dinamičke rute:
Za pristup ovoj ruti u vašem web pregledniku idite na ovu vezu http://localhost: 5173/[puž], gdje [puž] može biti bilo koji jedinstveni nedefinirani naziv rute koji odaberete.
Možete pristupiti svojoj aplikaciji [puž] parametar pomoću $page.params podaci iz $aplikacija/trgovine.
Na primjer:
<scriptlang='ts'>
import { page } from '$app/stores'const params = $page.params;
script>
<main>
<h1>This is the {params.slug} pageh1>
main>
Ovdje dodijelite $page.params prigovoriti na param varijablu i renderirajte param.puž podataka u vašoj aplikaciji.
Aplikacija dohvaća param.puž podataka s vaše veze. Na primjer, ako navigirate do http://localhost: 5173/vatra, sadržaj prikazan na aplikaciji bit će "Ovo je vatrena stranica."
Sada znate osnove usmjeravanja u SvelteKit-u
Usmjeravanje u SvelteKit-u moćna je značajka koja vam omogućuje strukturiranje vaše aplikacije na način koji ima smisla. Razumijevanje kako koristiti ovu značajku omogućit će vam stvaranje učinkovitijih web-aplikacija lakših za korištenje. Bilo da stvarate mali osobni projekt ili veliku aplikaciju, SvelteKitov sustav usmjeravanja ima alate koji su vam potrebni za uspjeh.
