Maršrutēšanas ceļvedis SvelteKit

SvelteKit ir ietvars visu izmēru tīmekļa lietojumprogrammu veidošanai ar lielu izstrādes pieredzi un elastīgu uz failiem balstītu maršrutēšanu. Ietvars apvieno vienas lapas lietotņu SEO un progresīvās uzlabošanas priekšrocības ar ātru servera puses renderēto lietojumprogrammu navigāciju. Viena no svarīgākajām SvelteKit funkcijām ir tā maršrutēšanas sistēma.

Izpratne par SvelteKit maršrutēšanu

SvelteKit ir ietvars celta virs Sveltes. Programmā SvelteKit maršrutēšana notiek pēc failiem balstītas sistēmas. Tas nozīmē, ka jūsu lapu direktoriju struktūra nosaka jūsu lietojumprogrammas maršrutus.

Lai labāk izprastu SvelteKit maršrutēšanas sistēmu, vispirms izveidojiet SvelteKit projektu. Lai to izdarītu, terminālī palaidiet šādu kodu:

npm create svelte@latest my-app

Pēc iepriekš minētā koda bloka palaišanas jūs atbildēsit uz virkni uzvedņu, lai konfigurētu savu lietojumprogrammu.

Pēc tam instalējiet projektam nepieciešamās atkarības. Lai to izdarītu cd iekļauties savā projektā un palaist:

npm install

Atveriet projektu izstrādes serverī, terminālī izpildot šādu komandu:

npm run dev

Tagad jūsu projekts tiks izveidots un darbosies http://localhost: 5173/. Atverot lietojumprogrammu izstrādes serverī, jums būs interfeiss, kas līdzīgs tālāk redzamajam attēlam.

Projekta saknes maršruts ‘/’ atbilst failam ar nosaukumu +lapa.slaids. Jūs varat atrast +lapa.slaids fails, kas seko faila ceļam; src/routes savā projektā.

Lai SvelteKit izveidotu dažādus maršrutus, varat izveidot mapes savā src/routes direktoriju. Katra mape atbildīs citam maršrutam. Izveidot a +lapa.slaids failu katrā mapē, lai definētu šī maršruta saturu.

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

Iepriekš minētais kods atradīsies iekšpusē +lapa failu. Jūs izveidosit slaidu failu iekšpusē par mapē src/routes direktoriju. Šajā failā būs maršruta saturs. Lai skatītu maršrutu savā tīmekļa pārlūkprogrammā, dodieties uz http://localhost: 5173/ap.

Navigācija uz /about maršruts ekrānā parādīs šo saskarni:

Izpratne par ligzdotajiem maršrutiem

Ligzdotie maršruti ir veids, kā strukturēt maršrutēšanas sistēmu tīmekļa lietojumprogrammā. Ligzdotā maršruta struktūrā maršruti tiek ievietoti citos maršrutos, veidojot starp tiem hierarhiskas attiecības. Jūs varat izveidot ligzdotus maršrutus SvelteKit, ievietojot mapes ar +lapa.slaids failu citās maršruta mapēs zem src/routes direktoriju.

Piemēram:

Šajā piemērā jūs ligzdot pastu maršruts ietvaros emuārs maršruts. Lai ligzdotu pastu maršruts ietvaros emuārs maršrutu, izveidojiet pastu mape un tā +lapa.slaids failu iekšpusē emuārs maršruta mape.

Lai piekļūtu emuāra maršrutam savā lietojumprogrammā, atveriet tīmekļa pārlūkprogrammu un dodieties uz http://localhost: 5173/emuārs.

Pasta maršruts būs pieejams plkst http://localhost: 5173/emuārs/ziņa.

Izkārtojumi un kļūdu maršruti

SvelteKit definē a lietojumprogrammas izkārtojumu līdzīgi Next.js. Abi ietvari izmanto a izkārtojumu komponents, lai definētu lietojumprogrammas struktūru.

SvelteKit izmanto +izkārtojums.slaids lai noteiktu lapu grupas izkārtojumu. Jūs varat izveidot a +izkārtojums.slaids failu mapē src/routes direktoriju, lai definētu izkārtojumu visām jūsu lietojumprogrammas lapām vai apakšdirektorijā, lai noteiktu izkārtojumu noteiktai lapu grupai.

Šeit ir piemērs, kā definēt izkārtojuma maršrutu visai lietojumprogrammai:

Iepriekš minētajā piemērā ir sniegts izkārtojuma maršruts. Fails satur a h1 elements, kas parāda tekstu "Šī ir SvelteKit lietojumprogramma." Tas ietver arī a slots elements. The slots elements ir īpašs elements, kas nosaka vietu, kur lietojumprogramma izkārtojumā atveidos jūsu maršrutu saturu. Tas darbojas tāpat kā Vue komponenti.

Šādā gadījumā jūsu lietojumprogramma atveidos jūsu maršrutu saturu zem h1 elements.

Lai definētu kļūdas lapu, izveidojiet failu ar nosaukumu +kļūda.svelte iekš src/routes direktoriju. Šī lapa tiks parādīta, ja renderēšanas laikā radīsies kļūda.

Piemēram:

Ja rodas kļūda, piemēram, pārvietojoties uz neesošu maršrutu, jūsu lietojumprogramma atgriezīsies pie šī kļūda maršruta vietā.

Piemēram:

Maršruts http://localhost: 5173/g neeksistē, tāpēc lietojumprogramma atveido kļūda maršruta vietā.

Navigācija starp lapām

Lai gūtu labu pieredzi, ir ļoti svarīgi atrast labāko veidu, kā pārvietoties starp izveidotajiem maršrutiem. Tradicionāli uz failiem balstīta maršrutēšana lielākajā daļā tehnoloģiju izmanto saites, lai pārvietotos starp dažādām lapām. Lai pārlūkotu SvelteKit lapas, varat izmantot vienkāršu HTML enkura tagu.

Piemēram, varat rakstīt šo kodu jebkurā vēlamajā maršrutā, taču jums tas ir jāieraksta izkārtojumu maršruts virs slots tags:

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

Noklikšķinot uz jebkuras enkura atzīmes, tiksiet novirzīts uz atbilstošo maršrutu.

Dinamiskā maršrutēšana SvelteKit

Dinamiskā maršrutēšana ļauj pakāpeniski izveidot maršrutus, ko lietojumprogramma ģenerē, pamatojoties uz datiem vai parametriem. Tas ļauj izveidot elastīgas un dinamiskas tīmekļa lietojumprogrammas, kas apstrādā dažādus maršrutus un parāda saturu atbilstoši konkrētiem datiem vai parametriem.

Lai SvelteKit izveidotu dinamisku maršrutu, izveidojiet mapi ar nosaukumu [sliemezis] un tad a +lapa.slaids failu mapē, lai definētu maršruta saturu. Ņemiet vērā, ka mapei varat piešķirt jebkādu nosaukumu, taču vienmēr ievietojiet nosaukumu iekavās [ ].

Šeit ir dinamiska maršruta piemērs:

Lai piekļūtu šim maršrutam savā tīmekļa pārlūkprogrammā, dodieties uz šo saiti http://localhost: 5173/[lode], kur [sliemezis] var būt jebkurš unikāls nedefinēts maršruta nosaukums, kuru izvēlaties.

Jūs varat piekļūt savai lietojumprogrammai [sliemezis] parametru, izmantojot $page.params dati no $app/stores.

Piemēram:

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

Šeit jūs piešķirat $page.params iebilst pret param mainīgo un atveidojiet param.slug datus savā lietojumprogrammā.

Lietojumprogramma izgūst param.slug dati no jūsu saites. Piemēram, ja pārejat uz http://localhost: 5173/ugunsgrēks, lietojumprogrammā parādītais saturs būs "Šī ir uguns lapa."

Tagad jūs zināt maršrutēšanas pamatus programmā SvelteKit

Maršrutēšana programmā SvelteKit ir jaudīga funkcija, kas ļauj strukturēt lietojumprogrammu saprātīgā veidā. Izpratne par šīs funkcijas izmantošanu ļaus jums izveidot efektīvākas un lietotājam draudzīgākas tīmekļa lietojumprogrammas. Neatkarīgi no tā, vai veidojat nelielu personisku projektu vai liela mēroga lietojumprogrammu, SvelteKit maršrutēšanas sistēmai ir nepieciešamie rīki, lai gūtu panākumus.