Zaimplementuj system routingu dla swojej aplikacji, korzystając z tego przewodnika.

SvelteKit to platforma do tworzenia aplikacji internetowych każdej wielkości, z dużym doświadczeniem programistycznym i elastycznym routingiem opartym na plikach. Ramy te łączą zalety SEO i progresywnego ulepszania aplikacji jednostronicowych z szybką nawigacją po aplikacjach renderowanych po stronie serwera. Jedną z krytycznych cech SvelteKit jest system routingu.

Zrozumienie routingu SvelteKit

SvelteKit to framework zbudowany na szczycie Svelte. W SvelteKit routing jest zgodny z systemem opartym na plikach. Oznacza to, że struktura katalogów Twoich stron określa trasy Twojej aplikacji.

Aby lepiej zrozumieć system routingu SvelteKit, najpierw utwórz projekt SvelteKit. Aby to zrobić, uruchom następujący kod w swoim terminalu:

npm create svelte@latest my-app

Po uruchomieniu powyższego bloku kodu odpowiesz na serię monitów, aby skonfigurować aplikację.

Następnie zainstaluj niezbędne zależności dla swojego projektu. Aby to zrobić płyta CD do swojego projektu i uruchom:

instagram viewer 
npm install

Otwórz projekt na serwerze programistycznym, uruchamiając następującą komendę w swoim terminalu:

npm run dev

Teraz Twój projekt będzie działał http://localhost: 5173/. Po otwarciu aplikacji na serwerze programistycznym będziesz mieć interfejs podobny do poniższego obrazu.

Trasa główna projektu ‘/’ odpowiada plikowi o nazwie +strona.swelta. Możesz znaleźć +strona.swelta plik zgodnie ze ścieżką pliku; źródło/trasy w Twoim projekcie.

Aby utworzyć różne trasy w SvelteKit, możesz utworzyć foldery w swoim źródło/trasy informator. Każdy folder będzie odpowiadał innej trasie. Wygeneruj +strona.swelta plik w każdym folderze, aby zdefiniować zawartość tej trasy.


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

Powyższy kod będzie żył w +strona plik. Utworzysz smukły plik wewnątrz o folder w źródło/trasy informator. Ten plik będzie zawierał zawartość trasy. Aby wyświetlić trasę w przeglądarce internetowej, przejdź do http://localhost: 5173/ok.

Nawigacja do /about route wyświetli ten interfejs na ekranie:

Zrozumienie tras zagnieżdżonych

Trasy zagnieżdżone to sposób na uporządkowanie systemu routingu w aplikacji internetowej. W zagnieżdżonej strukturze tras trasy są umieszczane w obrębie innych tras, tworząc między nimi hierarchiczną relację. Możesz tworzyć zagnieżdżone trasy w SvelteKit, umieszczając foldery z rozszerzeniem +strona.swelta plik wewnątrz innych folderów tras w ramach źródło/trasy informator.

Na przykład:

W tym przykładzie zagnieżdżasz plik post trasa w ramach blog trasa. Aby zagnieździć post trasa w ramach blog trasę, utwórz post folder i jego +strona.swelta plik wewnątrz blog folder trasy.

Aby uzyskać dostęp do trasy blogu w aplikacji, otwórz przeglądarkę internetową i przejdź do http://localhost: 5173/blog.

Trasa pocztowa będzie dostępna o godz http://localhost: 5173/blog/post.

Układy i trasy błędów

SvelteKit definiuje layout dla aplikacji w sposób podobny do Next.js. Oba frameworki używają a układ komponent do definiowania struktury aplikacji.

SvelteKit używa +układ.smukły, aby zdefiniować układ grupy stron. Możesz utworzyć +układ.smukły plik w źródło/trasy katalogu, aby zdefiniować układ dla wszystkich stron w aplikacji lub w podkatalogu, aby zdefiniować układ dla określonej grupy stron.

Oto przykład definiowania trasy układu dla całej aplikacji:

Powyższy przykład przedstawia trasę układu. Plik zawiera h1 element wyświetlający tekst „To jest aplikacja SvelteKit”. Zawiera również a otwór element. The otwór element to specjalny element, który definiuje lokalizację, w której aplikacja będzie renderować zawartość twoich tras w układzie. Działa tak samo jak komponenty Vue.

W takim przypadku twoja aplikacja wyświetli zawartość twoich tras poniżej h1 element.

Aby zdefiniować stronę błędu, utwórz plik o nazwie +błąd.prosty w źródło/trasy informator. Ta strona zostanie wyświetlona, ​​gdy podczas renderowania wystąpi błąd.

Na przykład:

Gdy napotkasz błąd, taki jak nawigacja do nieistniejącej trasy, aplikacja powróci do tego błąd zamiast tego trasa.

Na przykład:

Trasa http://localhost: 5173/go nie istnieje, więc aplikacja renderuje plik błąd zamiast tego trasa.

Nawigacja między stronami

Znalezienie najlepszego sposobu poruszania się między utworzonymi trasami ma kluczowe znaczenie dla dobrych wrażeń. Tradycyjnie routing oparty na plikach w większości technologii wykorzystuje łącza do nawigacji między różnymi stronami. Aby poruszać się między stronami w SvelteKit, możesz użyć prostego tagu zakotwiczenia HTML.

Na przykład możesz napisać ten kod w dowolnej trasie, ale powinieneś napisać go w układ trasa nad otwór etykietka:

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

Kliknięcie dowolnego znacznika zakotwiczenia przekieruje Cię do odpowiedniej trasy.

Routing dynamiczny w SvelteKit

Routing dynamiczny umożliwia stopniowe tworzenie tras generowanych przez aplikację na podstawie danych lub parametrów. Umożliwia tworzenie elastycznych i dynamicznych aplikacji internetowych obsługujących różne trasy i wyświetlających treści zgodnie z określonymi danymi lub parametrami.

Aby utworzyć trasę dynamiczną w SvelteKit, utwórz folder o nazwie [ślimak] a następnie +strona.swelta w folderze, aby zdefiniować zawartość trasy. Pamiętaj, że możesz nazwać folder, jak chcesz, ale pamiętaj, aby zawsze umieszczać nazwę w nawiasach kwadratowych [ ].

Oto przykład trasy dynamicznej:

Aby uzyskać dostęp do tej trasy w przeglądarce internetowej, przejdź do tego łącza http://localhost: 5173/[ślimak], Gdzie [ślimak] może być dowolną unikalną, niezdefiniowaną nazwą trasy, którą wybierzesz.

Możesz uzyskać dostęp do swojej aplikacji [ślimak] parametr za pomocą $page.params dane z $aplikacja/sklepy.

Na przykład:

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

Tutaj przypisujesz $page.params sprzeciwić się param zmienną i wyrenderuj parametr.slug dane w Twojej aplikacji.

Aplikacja pobiera parametr.slug dane z Twojego linku. Na przykład, jeśli nawigujesz do http://localhost: 5173/ogień, zawartość wyświetlana w aplikacji będzie „To jest strona ognia”.

Teraz znasz podstawy routingu w SvelteKit

Routing w SvelteKit to potężna funkcja, która pozwala uporządkować aplikację w sposób, który ma sens. Zrozumienie, jak korzystać z tej funkcji, umożliwi tworzenie bardziej wydajnych i przyjaznych dla użytkownika aplikacji internetowych. Niezależnie od tego, czy tworzysz mały osobisty projekt, czy aplikację na dużą skalę, system routingu SvelteKit ma narzędzia potrzebne do odniesienia sukcesu.