Wprowadzenie do routingu w Svelte

Svelte to szybko rozwijająca się platforma internetowa, której można używać do tworzenia stron internetowych. Prezentuje się jako lekka, łatwa w użyciu alternatywa dla popularnych frameworków, takich jak React i Vue.

Każda popularna platforma JavaScript ma towarzyszącą bibliotekę, której można użyć do routingu. Dowiedz się, jak Svelte pozwala zarządzać adresami URL i kodem, który je obsługuje.

Popularne biblioteki routingu

Najpopularniejszą biblioteką routingu dla React jest React Router, stworzony przez zespół Remix. W przypadku VueJS istnieje Vue Router, który daje programiście precyzyjną kontrolę nad dowolną nawigacją. W świecie Svelte najpopularniejszą biblioteką routingu jest smukłe-routing.

Inną główną biblioteką routingu dla Svelte jest smukły nawigator. Ponieważ jest to widelec smukłe-routing, warto najpierw zapoznać się z tą biblioteką.

Jak działa biblioteka svelte-routing

Istnieją trzy ważne elementy obsługi tras w Svelte: routera, Połączyć, I Trasa. Aby użyć ich w swojej aplikacji, możesz po prostu zaimportować te narzędzia z pliku smukłe-routing biblioteka.

<scenariusz>
zaimportuj {Route, Router, Link} z "svelte-routing";
scenariusz>

Komponent Router może mieć dwa opcjonalne rekwizyty: ścieżka bazowa I adres URL. The ścieżka bazowa właściwość jest podobna do nazwa podstawowa prop w React Router.

Domyślnie jest ustawiony na „/”. basepath może się przydać, jeśli aplikacja ma wiele punktów wejścia. Rozważmy na przykład następujący kod Svelte:

<scenariusz>
 importuj { Route, Router, Link } z "svelte-routing";
 niech ścieżka bazowa = "/użytkownik";
 niech ścieżka = lokalizacja.nazwaścieżki;
scenariusz>
<routera {ścieżka bazowa}>
<dzna kliknięcie={() => (ścieżka = lokalizacja.nazwaścieżki)}>
<PołączyćDo="/">Idź do domuPołączyć>
<PołączyćDo="/użytkownik/dawid">Zaloguj się jako DawidPołączyć>
dz>
<główny>
 Jesteś tutaj: <kod>{ścieżka}kod>
<Trasaścieżka="/">
<h1>Witaj w domu!h1>
Trasa>
<Trasaścieżka="/ dawid">
<h1>Witaj Dawid!h1>
Trasa>
główny>
routera>

Jeśli uruchomisz ten kod, zauważysz, że po kliknięciu pliku Idź do domu przycisk, przeglądarka przechodzi do ścieżki podstawowej „/ user”. Trasa definiuje komponent, który powinien być renderowany, jeśli ścieżka pasuje do określonej wartości Trasa rekwizyt.

Możesz określić, które elementy mają być renderowane w komponencie Route lub jako oddzielne elementy .smukły plik, o ile poprawnie zaimportujesz ten plik. Na przykład:

<Trasaścieżka="/o"część={O}/>

Powyższy blok kodu mówi przeglądarce, aby wyrenderowała plik Aplikacja składnika, gdy nazwa ścieżki to „/about”.

Podczas używania smukłe-routing, zdefiniuj linki wewnętrzne za pomocą Połączyć komponent zamiast tradycyjnego HTML A elementy.

Jest to podobne do sposobu, w jaki React Router obsługuje łącza wewnętrzne; każdy komponent łącza powinien mieć plik Do prop, który mówi przeglądarce, do której ścieżki ma nawigować.

Gdy przeglądarka renderuje komponent Svelte, Svelte automatycznie konwertuje wszystkie komponenty Link na odpowiedniki A elementy, zastępując Do rekwizyt z href atrybut. Oznacza to, że pisząc:

<PołączyćDo="/niektóre/ścieżka">To jest komponent łącza w svelte-routinguPołączyć>

Svelte przedstawia to przeglądarce jako:

<Ahref="/niektóre/ścieżka">To jest komponent łącza w svelte-routinguA>

Powinieneś użyć komponentu Link zamiast tradycyjnego A element podczas pracy z svelte-routing. To dlatego, że A elementy domyślnie wykonują przeładowanie strony.

Tworzenie SPA z Svelte i Svelte-Routing

Nadszedł czas, aby zastosować wszystko, czego się nauczyłeś, w praktyce, tworząc prostą aplikację słownikową, która umożliwia użytkownikowi wyszukiwanie słów. Ten projekt będzie korzystał z bezpłatnego Interfejs API słownika.

Aby rozpocząć, upewnij się, że masz zainstalowaną Yarn na swoim komputerze i uruchom:

przędza tworzy vite

Spowoduje to utworzenie rusztowania przy użyciu nowego projektu narzędzie do budowania Vite. Nazwij swój projekt, a następnie wybierz „Svelte” jako strukturę i „JavaScript” jako wariant. Następnie uruchom kolejno następujące polecenia:

płyta CD
przędza
Przędza dodaje svelte-routing
rozwinięcie przędzy

Następnie usuń zawartość pliku Smukłe aplikacje plik i zmień strukturę projektu, aby wyglądała tak:

Na powyższej ilustracji widać, że istnieje folder „components” z dwoma plikami: Strona główna. smukły I Znaczenie. smukły. Znaczenie. smukły jest komponentem, który wyświetli się, gdy użytkownik wyszuka słowo.

Przejdź do Smukłe aplikacje i zaimportuj komponenty Route, Router i Link z biblioteki svelte-routing. Upewnij się również, że zaimportowałeś plik Strona główna. smukły I Smukłe aplikacje składniki.

<scenariusz>
 importuj { Route, Router, Link } z "svelte-routing";
 zaimportuj dom z „./components/Home.svelte”;
 importuj znaczenie z „./components/Meaning.svelte”;
scenariusz>

Następnie utwórz komponent Router, który zawija plik główny Element HTML z klasą „app”.

<routera>
<głównyklasa=„aplikacja”>
główny>
routera>

w główny element, dodaj a nawigacja element z komponentem Link jako jego dzieckiem. Właściwość „do” tego komponentu linku powinna wskazywać „/”. Ten komponent pozwoli użytkownikowi przejść do strony głównej.

<głównyklasa=„aplikacja”>
<nawigacja>
<PołączyćDo="/">DomPołączyć>
nawigacja>
główny>

Teraz czas na pracę nad trasami. Gdy użytkownik ładuje aplikację, plik Dom komponent powinien renderować.

Przejście do „/find/:word” powinno wyrenderować Oznaczający część. Klauzula „:word” jest parametrem ścieżki.

W przypadku tego projektu nie musisz martwić się o CSS. Po prostu zastąp zawartość własną aplikacja.css plik z zawartością aplikacja.css plik z tego repozytorium GitHub.

Nadszedł czas na zdefiniowanie tras. Ścieżka poziomu głównego powinna renderować plik Dom komponent, podczas gdy „/find/:word” powinno renderować Oznaczający część.

<Trasaścieżka="/"część={Dom} />
<Trasaścieżka="/znajdź/:słowo"niech: param>
<Oznaczającysłowo={parametry.słowo} />
Trasa>

Ten blok kodu wykorzystuje pozwalać dyrektywę, aby przekazać parametr „word” do metody Oznaczający komponent jako rekwizyt.

Teraz otwórz Strona główna. smukły zarchiwizuj i zaimportuj plik nawigować z biblioteki „svelte-routing” i zdefiniuj zmienną wprowadzone słowo.

<scenariusz>
 importuj {nawiguj} z „svelte-routing”;
 wprowadź słowo;
scenariusz>

Pod scenariusz tag, utwórz główny element z klasą „strona główna”, a następnie utwórz plik dz element z klasą „słownik-tekst”.

<głównyklasa=„strona główna”>
<dzklasa="tekst słownika">Słownikdz>
główny>

Następnie utwórz formularz z na: złożyć dyrektywa. Ten formularz powinien zawierać dwoje dzieci: an wejście element, którego wartość jest powiązana z wprowadzone słowo zmienna i przycisk przesyłania, który jest renderowany warunkowo, gdy tylko użytkownik zacznie pisać:

<formularzna: złożyć|zapobiec Domyślnie={() => nawigacja(`/find/${enteredWord.toLowerCase()}`)}>
<wejście
 typ="tekst"
 powiązanie: wartość={wprowadzone słowo}
 placeholder="Rozpocznij wyszukiwanie..."
 autofokus
 />
 {#jeśli wprowadzono słowo}
<przycisktyp="składać">Wyszukaj słowoprzycisk>
 {/Jeśli}
formularz>

Ten blok kodu wykorzystuje nawigować funkcję przekierowania użytkownika po zakończeniu akcji przesyłania. Teraz otwórz Znaczenie. smukły plik i w znaczniku skryptu wyeksportuj plik słowo podpieraj i twórz Komunikat o błędzie zmienny:

wyeksportuj niech słowo;
let errorMessage = "Brak połączenia. Sprawdź swój internet";

Następnie wyślij żądanie GET do interfejsu API słownika, przekazując plik słowo jako parametr:

asynchronicznyfunkcjonowaćpobierz znaczenie słowa(słowo) {
konst odpowiedź = czekać na aportować(
` https://api.dictionaryapi.dev/api/v2/entries/en/${słowo}`
 );
konst json = czekać na odpowiedź.json();
konsola.log (json);
Jeśli (odpowiedź ok) {
powrót json;
 } w przeciwnym razie {
 komunikat o błędzie = komunikat json;
rzucićnowyBłąd(json);
 }
 }
pozwalać obietnica = getWordMeaning (słowo);

W powyższym bloku kodu funkcja asynchroniczna zwraca dane JSON, jeśli odpowiedź się powiedzie. Zmienna obietnicy reprezentuje wynik pobierz znaczenie słowa funkcja po wywołaniu.

W znacznikach zdefiniuj element div z klasą strona znaczeniowa. Następnie zdefiniuj element h1, który zawiera słowo zmienna małymi literami:

<dzklasa=„strona-znaczenie”>
<h1>
 {word.toLowerCase()}
h1>
dz>

Następnie użyj bloków oczekujących Svelte'a, aby wywołać metodę pobierz znaczenie słowa funkcjonować:

{#czekaj na obietnicę}
<P>Ładowanie...P>
{:następnie wpisy}
{:złapać}
 {Komunikat o błędzie}
{/czekać na}

Ten kod wyświetla Ładowanie... napisz kiedy wysłano żądanie GET do interfejsu API. Jeśli wystąpi błąd, wyświetli zawartość pliku Komunikat o błędzie.

w {:następnie wpisy} blok, dodaj:

{#każdy wpis jako wpis}
 {#każdy wpis.znaczenie jako znaczenie}
<dzklasa="wejście">
<dzklasa="część mowy">
 {znaczenie.część mowy}
dz>
<ol>
 {#każde znaczenie.definicje jako definicja}
<li>
 {definicja.definicja}
<br />
<dzklasa="przykład">
 {#if definicja.przykład}
 {definicja.przykład}
 {/Jeśli}
dz>
li>
 {/każdy}
ol>
dz>
 {/każdy}
{/każdy}

Jeśli obietnica zostanie rozwiązana pomyślnie, plik wpisy zmienna zawiera wynikowe dane.

Następnie dla każdej iteracji wejście I oznaczający, ten kod renderuje część mowy za pomocą znaczenie.część mowy oraz wykaz używanych definicji definicja. definicja. Wyświetli również przykładowe zdanie, jeśli takie jest dostępne.

Otóż ​​to. Utworzyłeś słownik Single Page Application (SPA) przy użyciu svelte-routingu. Możesz pójść dalej, jeśli chcesz, lub możesz się wymeldować smukły nawigator, widelec smukłe-routing.

Poprawa doświadczenia użytkownika dzięki routingowi po stronie klienta

Obsługa routingu w przeglądarce zamiast na serwerze ma wiele zalet. Aplikacje korzystające z routingu po stronie klienta mogą wydawać się płynniejsze dla użytkownika końcowego, zwłaszcza w połączeniu z animacjami i przejściami.

Jeśli jednak chcesz, aby Twoja witryna zajmowała wyższe pozycje w wyszukiwarkach, powinieneś rozważyć obsługę tras na serwerze.