Implementați sistemul de rutare pentru aplicația dvs. cu ajutorul acestui ghid.

SvelteKit este un cadru pentru construirea de aplicații web de toate dimensiunile, cu o experiență excelentă de dezvoltare și rutare flexibilă bazată pe fișiere. Cadrul combină SEO și beneficiile de îmbunătățire progresivă ale aplicațiilor dintr-o singură pagină cu navigarea rapidă a aplicațiilor randate pe server. Una dintre caracteristicile critice ale SvelteKit este sistemul său de rutare.

Înțelegerea rutei SvelteKit

SvelteKit este un cadru construit pe vârful Sveltei. În SvelteKit, rutarea urmează un sistem bazat pe fișiere. Aceasta înseamnă că structura de directoare a paginilor dvs. determină rutele aplicației dvs.

Pentru a înțelege mai bine sistemul de rutare SvelteKit, creați mai întâi un proiect SvelteKit. Pentru a face acest lucru, rulați următorul cod în terminalul dvs.:

npm create svelte@latest my-app

După rularea blocului de cod de mai sus, veți răspunde la o serie de solicitări pentru a vă configura aplicația.

instagram viewer

Apoi, instalați dependențele necesare pentru proiectul dvs. Pentru a face acest lucru CD în proiectul dvs. și rulați:

npm install

Deschideți proiectul pe serverul de dezvoltare rulând următoarea comandă în terminalul dvs.:

npm run dev

Acum, proiectul tău va fi pus în funcțiune http://localhost: 5173/. Când deschideți aplicația pe serverul dvs. de dezvoltare, veți avea o interfață similară cu imaginea de mai jos.

Traseul rădăcină al proiectului ‘/’ corespunde unui fișier numit +page.svelte. Puteți găsi +page.svelte fișier urmând calea fișierului; src/routes în proiectul tău.

Pentru a crea diferite rute în SvelteKit, puteți crea foldere în dvs src/routes director. Fiecare folder va corespunde unui traseu diferit. Generați a +page.svelte fișier în fiecare folder pentru a defini conținutul rutei respective.


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

Codul de mai sus va locui în interiorul +pagina fişier. Veți crea un fișier svelt în interiorul despre folderul în src/routes director. Acest fișier va conține conținutul traseului. Pentru a vedea traseul în browserul dvs. web, navigați la http://localhost: 5173/aproximativ.

Navigarea către /about ruta va afișa această interfață pe ecran:

Înțelegerea rutelor imbricate

Rutele imbricate sunt o modalitate de a structura sistemul de rutare într-o aplicație web. Într-o structură de rută imbricată, rutele sunt plasate în alte rute, creând o relație ierarhică între ele. Puteți crea rute imbricate în SvelteKit plasând foldere cu +page.svelte fișier în interiorul altor foldere de rută sub src/routes director.

De exemplu:

În acest exemplu, cuibărați post traseu în cadrul blog traseu. Pentru a cuibari post traseu în cadrul blog traseu, creați post folderul și acesta +page.svelte dosar în interiorul blog folderul rutei.

Pentru a accesa traseul blogului în aplicația dvs., deschideți browserul web și navigați la http://localhost: 5173/blog.

Traseul postului va fi disponibil la http://localhost: 5173/blog/post.

Aspecte și trasee de eroare

SvelteKit definește a aspect pentru aplicație într-un mod similar cu Next.js. Ambele cadre folosesc a aspect componentă pentru a defini structura aplicației.

SvelteKit folosește +aspect.svelte pentru a defini un aspect pentru un grup de pagini. Puteți crea un +aspect.svelte dosar în src/routes director pentru a defini un aspect pentru toate paginile din aplicația dvs. sau într-un subdirector pentru a defini un aspect pentru un anumit grup de pagini.

Iată un exemplu despre cum să definiți o rută de aspect pentru întreaga aplicație:

Exemplul de mai sus oferă o rută de aspect. Fișierul conține un h1 element care afișează textul „Aceasta este o aplicație SvelteKit”. Include, de asemenea, a slot element. The slot elementul este un element special care definește locația în care aplicația va reda conținutul rutelor dvs. în cadrul layout-ului. Funcționează în același mod ca și componentele Vue.

În acest caz, aplicația dvs. va reda conținutul rutelor dvs. sub h1 element.

Pentru a defini o pagină de eroare, creați un fișier numit +error.svelte în src/routes director. Această pagină se va afișa atunci când apare o eroare în timpul redării.

De exemplu:

Când întâmpinați o eroare, cum ar fi navigarea către o rută inexistentă, aplicația dvs. va reveni la aceasta eroare traseu în schimb.

De exemplu:

Ruta http://localhost: 5173/go nu există, așa că aplicația redă eroare traseu în schimb.

Navigarea între pagini

Găsirea celui mai bun mod de a naviga între rutele pe care le creați este crucială pentru o experiență bună. În mod tradițional, rutarea bazată pe fișiere în majoritatea tehnologiilor utilizează legături pentru a naviga între diferite pagini. Pentru a naviga între pagini în SvelteKit, puteți utiliza o etichetă de ancorare HTML simplă.

De exemplu, puteți scrie acest cod pe orice rută doriți, dar ar trebui să îl scrieți în aspect traseu deasupra slot etichetă:

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

Făcând clic pe orice etichetă de ancorare, veți ajunge la ruta corespunzătoare.

Rutare dinamică în SvelteKit

Rutarea dinamică vă permite să creați progresiv rute pe care aplicația le generează pe baza datelor sau a parametrilor. Vă permite să creați aplicații web flexibile și dinamice care gestionează diferite rute și afișează conținut în funcție de date sau parametri specifici.

Pentru a crea o rută dinamică în SvelteKit, creați un folder numit [melc] si apoi a +page.svelte fișier în folder pentru a defini conținutul rutei. Rețineți că puteți denumi folderul cum doriți, dar asigurați-vă că întotdeauna includeți numele între paranteze [ ].

Iată un exemplu de traseu dinamic:

Pentru a accesa această rută în browserul dvs. web, navigați la acest link http://localhost: 5173/[slug], Unde [melc] poate fi orice nume de rută unic nedefinit pe care îl alegeți.

Puteți accesa aplicația dvs [melc] parametru folosind $page.params date de la $app/magazine.

De exemplu:

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

Aici, atribuiți $page.params obiect la param variabilă și redă param.slug datele din aplicația dvs.

Aplicația preia fișierul param.slug date din linkul dvs. De exemplu, dacă navigați la http://localhost: 5173/incendiu, conținutul afișat în aplicație va fi — Aceasta este pagina de foc.

Acum cunoașteți elementele de bază ale rutării în SvelteKit

Rutarea în SvelteKit este o caracteristică puternică care vă permite să vă structurați aplicația într-un mod care să aibă sens. Înțelegerea modului de utilizare a acestei funcții vă va permite să creați aplicații web mai eficiente și mai ușor de utilizat. Indiferent dacă creați un proiect personal mic sau o aplicație la scară largă, sistemul de rutare al SvelteKit are instrumentele de care aveți nevoie pentru a reuși.