Izvedite usmerjevalni sistem za svojo aplikacijo s pomočjo tega priročnika.
SvelteKit je ogrodje za gradnjo spletnih aplikacij vseh velikosti, z odličnimi razvojnimi izkušnjami in prilagodljivim usmerjanjem na podlagi datotek. Ogrodje združuje prednosti SEO in naprednih izboljšav enostranskih aplikacij s hitro navigacijo aplikacij, upodobljenih na strani strežnika. Ena od kritičnih lastnosti SvelteKita je njegov sistem usmerjanja.
Razumevanje usmerjanja SvelteKit
SvelteKit je okvir zgrajen na vrhu Svelte. V SvelteKit-u usmerjanje sledi datotečnemu sistemu. To pomeni, da struktura imenika vaših strani določa poti vaše aplikacije.
Če želite bolje razumeti sistem usmerjanja SvelteKit, najprej ustvarite projekt SvelteKit. Če želite to narediti, zaženite naslednjo kodo v svojem terminalu:
npm create svelte@latest my-app
Po zagonu zgornjega bloka kode boste odgovorili na vrsto pozivov za konfiguracijo vaše aplikacije.
Nato namestite potrebne odvisnosti za svoj projekt. Storiti to cd v svoj projekt in zaženite:
npm install
Odprite projekt na razvojnem strežniku tako, da v terminalu zaženete naslednji ukaz:
npm run dev
Zdaj se bo vaš projekt začel izvajati http://localhost: 5173/. Ko odprete aplikacijo na vašem razvojnem strežniku, boste imeli vmesnik, podoben spodnji sliki.
Korenska pot projekta ‘/’ ustreza datoteki z imenom +stran.svelte. Lahko najdete +stran.svelte datoteka, ki sledi poti datoteke; src/routes v vašem projektu.
Če želite ustvariti različne poti v SvelteKit, lahko ustvarite mape v svojem src/routes imenik. Vsaka mapa bo ustrezala drugi poti. Ustvari a +stran.svelte datoteko v vsaki mapi, da določite vsebino te poti.
<main>
<h2> This is the about page h2>
main>
Zgornja koda bo živela znotraj + stran mapa. Ustvarili boste vitko datoteko znotraj približno mapo v src/routes imenik. Ta datoteka bo vsebovala vsebino za pot. Za ogled poti v spletnem brskalniku pojdite na http://localhost: 5173/približno.
Navigacija do /about route bo na vašem zaslonu prikazal ta vmesnik:
Razumevanje ugnezdenih poti
Ugnezdene poti so način za strukturiranje sistema usmerjanja v spletni aplikaciji. V ugnezdeni strukturi poti so poti postavljene znotraj drugih poti, kar ustvarja hierarhično razmerje med njimi. V SvelteKit lahko ustvarite ugnezdene poti tako, da postavite mape z +stran.svelte datoteko znotraj drugih map poti pod src/routes imenik.
Na primer:
V tem primeru ugnezdite post poti znotraj blog pot. Za ugnezdenje post poti znotraj blog poti, ustvarite post mapo in njeno +stran.svelte datoteka znotraj blog mapo poti.
Za dostop do spletnega dnevnika v aplikaciji odprite spletni brskalnik in se pomaknite do http://localhost: 5173/blog.
Post pot bo na voljo na http://localhost: 5173/blog/objava.
Postavitve in poti napak
SvelteKit definira a postavitev za aplikacijo na podoben način kot Next.js. Oba ogrodja uporabljata a postavitev komponento za določanje strukture aplikacije.
SvelteKit uporablja +postavitev.svelte da določite postavitev za skupino strani. Ustvarite lahko a +postavitev.svelte datoteka v src/routes imenik, da določite postavitev za vse strani v vaši aplikaciji, ali v podimeniku, da določite postavitev za določeno skupino strani.
Tukaj je primer, kako definirati pot postavitve za celotno aplikacijo:
Zgornji primer prikazuje pot postavitve. Datoteka vsebuje a h1 element, ki prikazuje besedilo "To je aplikacija SvelteKit." Vključuje tudi a reža element. The reža element je poseben element, ki določa lokacijo, kjer bo aplikacija prikazala vsebino vaših poti znotraj postavitve. Deluje na enak način kot komponente Vue.
V tem primeru bo vaša aplikacija prikazala vsebino vaših poti pod h1 element.
Če želite definirati stran z napako, ustvarite datoteko z imenom +napaka.svelte v src/routes imenik. Ta stran se prikaže, ko med upodabljanjem pride do napake.
Na primer:
Ko naletite na napako, kot je navigacija po neobstoječi poti, se bo vaša aplikacija vrnila na to napaka pot namesto tega.
Na primer:
Pot http://localhost: 5173/go ne obstaja, zato aplikacija upodablja napaka pot namesto tega.
Krmarjenje med stranmi
Iskanje najboljšega načina za navigacijo med potmi, ki jih ustvarite, je ključnega pomena za dobro izkušnjo. Tradicionalno usmerjanje na podlagi datotek v večini tehnologij uporablja povezave za krmarjenje med različnimi stranmi. Za krmarjenje med stranmi v SvelteKitu lahko uporabite preprosto sidrno oznako HTML.
Na primer, to kodo lahko napišete na katero koli pot, vendar jo morate zapisati v postavitev pot nad reža oznaka:
<ul>
<li>
<ahref="/">Homea>
li>
<li>
<ahref="/about">Abouta>
li>
<li>
<ahref="/blog">Bloga>
li>
<li>
<ahref="/blog/post">Posta>
li>
ul>
S klikom na katero koli sidrno oznako boste navigirani do ustrezne poti.
Dinamično usmerjanje v SvelteKit
Dinamično usmerjanje vam omogoča postopno ustvarjanje poti, ki jih aplikacija ustvari na podlagi podatkov ali parametrov. Omogoča ustvarjanje prilagodljivih in dinamičnih spletnih aplikacij, ki obravnavajo različne poti in prikazujejo vsebino glede na določene podatke ali parametre.
Če želite ustvariti dinamično pot v SvelteKit, ustvarite mapo z imenom [polžek] in nato a +stran.svelte datoteko v mapi, da določite vsebino poti. Upoštevajte, da lahko mapo poimenujete, kot želite, vendar ime vedno zavijte v oklepaje [ ].
Tukaj je primer dinamične poti:
Za dostop do te poti v spletnem brskalniku pojdite na to povezavo http://localhost: 5173/[polžek], kje [polžek] je lahko katero koli edinstveno nedefinirano ime poti, ki ga izberete.
Lahko dostopate do svoje aplikacije [polžek] parameter z uporabo $page.params podatki iz $app/trgovine.
Na primer:
<scriptlang='ts'>
import { page } from '$app/stores'const params = $page.params;
script>
<main>
<h1>This is the {params.slug} pageh1>
main>
Tukaj dodelite $page.params nasprotovati param spremenljivko in upodobi param.slug podatkov v vaši aplikaciji.
Aplikacija pridobi param.slug podatke iz vaše povezave. Na primer, če navigirate do http://localhost: 5173/ogenj, bo prikazana vsebina v aplikaciji "To je požarna stran."
Zdaj poznate osnove usmerjanja v SvelteKit
Usmerjanje v SvelteKit je zmogljiva funkcija, ki vam omogoča strukturiranje vaše aplikacije na smiseln način. Če boste razumeli, kako uporabljati to funkcijo, boste lahko ustvarili učinkovitejše in uporabniku prijaznejše spletne aplikacije. Ne glede na to, ali ustvarjate majhen osebni projekt ali obsežno aplikacijo, ima SvelteKitov sistem usmerjanja orodja, ki jih potrebujete za uspeh.