SvelteKiti marsruutimise juhend

SvelteKit on raamistik igas suuruses veebirakenduste loomiseks, millel on suurepärane arenduskogemus ja paindlik failipõhine marsruutimine. Raamistik ühendab üheleheliste rakenduste SEO ja järkjärgulise täiustamise eelised serveripoolsetes renderdatud rakendustes kiire navigeerimisega. Üks SvelteKiti kriitilisi omadusi on selle marsruutimissüsteem.

SvelteKiti marsruutimise mõistmine

SvelteKit on raamistik ehitatud Svelte peale. SvelteKitis järgib marsruutimine failipõhist süsteemi. See tähendab, et teie lehtede kataloogistruktuur määrab teie rakenduse marsruudid.

SvelteKiti marsruutimissüsteemi paremaks mõistmiseks looge esmalt SvelteKiti projekt. Selleks käivitage terminalis järgmine kood:

npm create svelte@latest my-app

Pärast ülaltoodud koodiploki käivitamist vastate rakenduse konfigureerimiseks viipadele.

Järgmisena installige oma projekti jaoks vajalikud sõltuvused. Selleks cd oma projekti ja käivitage:

npm install

Avage projekt arendusserveris, käivitades terminalis järgmise käsu:

npm run dev

Nüüd on teie projekt valmis ja töötab http://localhost: 5173/. Kui avate rakenduse oma arendusserveris, avaneb teile alloleval pildil sarnane liides.

Projekti juurmarsruut ‘/’ vastab failile nimega +leht.peenike. Võite leida +leht.peenike fail, mis järgib failiteed; src/routes oma projektis.

SvelteKitis erinevate marsruutide loomiseks saate luua kaustu src/routes kataloog. Iga kaust vastab erinevale marsruudile. Genereeri a +leht.peenike faili igas kaustas, et määrata selle marsruudi sisu.

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

Ülaltoodud kood jääb elama +leht faili. Loote sisemusse peenikese faili umbes kaustas src/routes kataloog. See fail sisaldab marsruudi sisu. Marsruudi vaatamiseks veebibrauseris navigeerige aadressile http://localhost: 5173/umbes.

Navigeerimine lehele /about marsruut kuvab teie ekraanil selle liidese:

Pesastatud marsruutide mõistmine

Pesastatud marsruudid on viis marsruutimissüsteemi struktureerimiseks veebirakenduses. Pesastatud marsruudistruktuuris paigutatakse marsruudid teiste marsruutide sisse, luues nende vahel hierarhilise seose. Saate luua SvelteKitis pesastatud marsruute, asetades kaustad +leht.peenike faili teistes marsruudikaustades src/routes kataloog.

Näiteks:

Selles näites pesad postitus marsruudi sees ajaveebi tee. Et pesa postitus marsruudi sees ajaveebi marsruut, looge postitus kaust ja selle +leht.peenike faili sees ajaveebi marsruudi kaust.

Oma rakenduses ajaveebi marsruudile juurdepääsuks avage veebibrauser ja navigeerige saidile http://localhost: 5173/blogi.

Postitee on saadaval aadressil http://localhost: 5173/blogi/postitus.

Paigutused ja veamarsruudid

SvelteKit määratleb a rakenduse paigutus sarnaselt Next.js-iga. Mõlemad raamistikud kasutavad a paigutus komponent rakenduse struktuuri määratlemiseks.

SvelteKit kasutab +paigutus.peenike lehekülgede rühma paigutuse määratlemiseks. Saate luua a +paigutus.peenike faili src/routes kataloog, et määrata paigutus kõigile teie rakenduse lehtedele või alamkataloog, et määrata paigutus konkreetsele lehtede rühmale.

Siin on näide kogu rakenduse paigutuse marsruudi määratlemisest.

Ülaltoodud näide pakub paigutusmarsruuti. Fail sisaldab a h1 element, mis kuvab teksti "See on SvelteKiti rakendus." See hõlmab ka a pesa element. The pesa element on spetsiaalne element, mis määrab asukoha, kus rakendus teie marsruutide sisu paigutuses renderdab. See töötab samamoodi nagu Vue komponendid.

Sel juhul renderdab teie rakendus teie marsruutide sisu allpool h1 element.

Vealehe määratlemiseks looge fail nimega +error.svelte aastal src/routes kataloog. See leht kuvatakse, kui renderdamisel ilmneb tõrge.

Näiteks:

Kui ilmneb tõrge, näiteks navigeerimine olematule marsruudile, naaseb teie rakendus sellele viga marsruudi asemel.

Näiteks:

Teekond http://localhost: 5173 / käi ei eksisteeri, seega renderdab rakendus viga marsruudi asemel.

Lehtede vahel navigeerimine

Parima viisi leidmine loodud marsruutide vahel navigeerimiseks on hea kogemuse saamiseks ülioluline. Traditsiooniliselt kasutab failipõhine marsruutimine enamikus tehnoloogiates erinevate lehtede vahel navigeerimiseks linke. SvelteKiti lehtede vahel navigeerimiseks saate kasutada lihtsat HTML-ankurmärgendit.

Näiteks võite selle koodi kirjutada mis tahes soovitud marsruudile, kuid peaksite selle kirjutama paigutus marsruut eespool pesa silt:

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

Mis tahes ankrusildil klõpsamine suunab teid vastavale marsruudile.

Dünaamiline marsruutimine SvelteKitis

Dünaamiline marsruutimine võimaldab teil järk-järgult luua marsruute, mida rakendus andmete või parameetrite põhjal genereerib. See võimaldab teil luua paindlikke ja dünaamilisi veebirakendusi, mis haldavad erinevaid marsruute ja kuvavad sisu vastavalt konkreetsetele andmetele või parameetritele.

SvelteKitis dünaamilise marsruudi loomiseks looge kaust nimega [nälkjas] ja siis a +leht.peenike marsruudi sisu määratlemiseks. Pange tähele, et saate anda kaustale nime, mis teile meeldib, kuid veenduge, et nimi oleks alati sulgudes [ ].

Siin on dünaamilise marsruudi näide:

Sellele marsruudile juurdepääsuks oma veebibrauseris navigeerige sellele lingile http://localhost: 5173/[nälkjas], kus [nälkjas] võib olla mis tahes kordumatu määratlemata marsruudi nimi, mille valite.

Saate juurdepääsu oma rakendusele [nälkjas] parameetri abil $page.params andmed alates $rakendus/poed.

Näiteks:

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

Siin määrate $page.params vastu param muutuja ja renderdage param.slug andmed teie rakenduses.

Rakendus otsib alla param.slug andmed teie lingilt. Näiteks kui navigeerite aadressile http://localhost: 5173/tulekahju, on rakenduses kuvatav sisu "See on tulekahju leht."

Nüüd teate SvelteKiti marsruutimise põhitõdesid

SvelteKiti marsruutimine on võimas funktsioon, mis võimaldab teil oma rakendust mõistlikul viisil struktureerida. Selle funktsiooni kasutamise mõistmine võimaldab teil luua tõhusamaid ja kasutajasõbralikumaid veebirakendusi. Olenemata sellest, kas loote väikese isikliku projekti või suuremahulist rakendust, on SvelteKiti marsruutimissüsteemis edu saavutamiseks vajalikud tööriistad.