Маршрутизирането е техника, която ще използвате с много рамки, включително Svelte. Открийте как да го използвате във ваша полза.
Svelte е бързо развиваща се уеб рамка, която можете да използвате за създаване на уебсайтове. Той се представя като лека, лесна за използване алтернатива на популярни рамки като React и Vue.
Всяка популярна JavaScript рамка има придружаваща библиотека, която можете да използвате за маршрутизиране. Открийте как Svelte ви позволява да управлявате вашите URL адреси и кода, който ги обработва.
Популярни библиотеки за маршрутизиране
Най-популярната библиотека за маршрутизиране за React е React Router, създаден от екипа на Remix. За VueJS има Vue Router, който дава на разработчика фин контрол върху всяка навигация. В света на Svelte най-популярната библиотека за маршрутизиране е елегантно маршрутизиране.
Другата основна библиотека за маршрутизиране за Svelte е елегантен навигатор. Тъй като е разклонение на елегантно маршрутизиране, полезно е първо да научите за тази библиотека.
Как работи библиотеката за изящно маршрутизиране
Има три важни компонента за обработка на маршрути в Svelte: Рутер, Връзка, и Маршрут. За да ги използвате във вашето приложение, можете просто да импортирате тези помощни програми от елегантно маршрутизиране библиотека.
<сценарий>
импортиране на {Route, Router, Link} от "svelte-routing";
сценарий>
Компонентът Router може да има две незадължителни подпори: базов път и URL адрес. The базов път свойство е подобно на основно име prop в React Router.
По подразбиране е зададено на "/". basepath може да бъде полезен, ако вашето приложение има множество входни точки. Например, разгледайте следния код на Svelte:
<сценарий>
импортиране на {Route, Router, Link} от "svelte-routing";
let basepath = "/user";
нека път = location.pathname;
сценарий><Рутер {базов път}>
<дивна: щракване={() => (path = location.pathname)}>
<Връзкада се="/">Отиди вкъщиВръзка>
<Връзкада се="/user/david">Влезте като DavidВръзка>
див><основен>
Ти си тук: <код>{path}код><Маршрутпът="/">
<h1>Добре дошъл у дома!h1>
Маршрут>
<Маршрутпът="/дейвид">
<h1>Здравей Дейвид!h1>
Маршрут>
основен>
Рутер>
Ако стартирате този код, ще забележите, че когато щракнете върху Отиди вкъщи бутон, браузърът навигира до основния път "/user". Маршрутът дефинира компонента, който трябва да се изобрази, ако пътят съвпада със стойността в указаното Маршрут опора
Можете да определите кои елементи да се визуализират вътре в компонента Route или като отделни .изтънчен файл, стига да импортирате правилно този файл. Например:
<Маршрутпът="/относно"компонент={Относно}/>
Кодовият блок по-горе казва на браузъра да изобрази Приложение компонент, когато името на пътя е "/about".
При използване елегантно маршрутизиране, дефинирайте вътрешни връзки с Връзка компонент вместо традиционния HTML а елементи.
Това е подобно на начина, по който React Router обработва вътрешни връзки; всеки компонент на Link трябва да има a да се prop, който казва на браузъра кой път да навигира.
Когато браузърът визуализира компонент на Svelte, Svelte автоматично преобразува всички компоненти на Link в еквивалентни а елементи, заменящи да се опора с ан href атрибут. Това означава, че когато пишете следното:
<Връзкада се="/някои/път">Това е компонент за връзка в изтънченото маршрутизиранеВръзка>
Svelte го представя на браузъра като:
<аhref="/някои/път">Това е компонент за връзка в изтънченото маршрутизиранеа>
Трябва да използвате компонента Link вместо традиционния а елемент при работа с изтънчено маршрутизиране. Това е така, защото а елементите изпълняват презареждане на страницата по подразбиране.
Създаване на СПА със Svelte и Svelte-Routing
Време е да приложите на практика всичко, което сте научили, като създадете просто речниково приложение, което позволява на потребителя да търси думи. Този проект ще използва безплатния API на речника.
За да започнете, уверете се, че имате инсталиран Yarn на вашата машина и стартирайте:
прежда създават vite
Това ще създаде скеле за нов проект с помощта на инструментът за изграждане на Vite. Назовете проекта си, след което изберете „Svelte“ като рамка и „JavaScript“ като вариант. След това изпълнете следните команди една след друга:
cd
прежда
прежда добавете елегантно насочване
разработка на прежда
След това изтрийте съдържанието на App.svelte файл и променете структурата на проекта, за да изглежда така:
От илюстрацията по-горе можете да видите, че има папка "components" с два файла: Home.svelte и Значение.svelte. Значение.svelte е компонентът, който ще изобразява, когато потребителят търси дума.
Навигирайте до App.svelte файл и импортирайте компонентите Route, Router и Link от библиотеката sulte-routing. Също така не забравяйте да импортирате Home.svelte и App.svelte компоненти.
<сценарий>
импортиране на {Route, Router, Link} от "svelte-routing";
импортиране на Home от "./components/Home.svelte";
импортиране на значение от "./components/Meaning.svelte";
сценарий>
След това създайте компонент Router, който обвива a основен HTML елемент с класа "app".
<Рутер>
<основенклас="приложение">
основен>
Рутер>
В основен елемент, добавете a нав елемент с компонент Link като негов дъщерен елемент. Проп „към“ на компонента за връзка трябва да сочи към „/“. Този компонент ще позволи на потребителя да навигира до началната страница.
<основенклас="приложение">
<нав>
<Връзкада се="/">У домаВръзка>
нав>
основен>
Сега е време за работа по маршрутите. Когато потребителят зареди приложението, У дома компонентът трябва да се рендира.
Навигирането до "/find/:word" трябва да изобрази Смисъл компонент. Клаузата ":word" е параметър на пътя.
За този проект не е нужно да се притеснявате за CSS. Просто сменете съдържанието на своето app.css файл със съдържанието на app.css файл от това хранилище на GitHub.
Сега е време да определим маршрутите. Пътят на основното ниво трябва да изобрази У дома компонент, докато "/find/:word" трябва да изобрази Смисъл компонент.
<Маршрутпът="/"компонент={У дома} />
<Маршрутпът="/намери/:дума"нека: параметри>
<Смисълдума={params.word} />
Маршрут>
Този кодов блок използва позволявам директива за предаване на параметъра "word" надолу към Смисъл компонент като опора.
Сега отворете Home.svelte файл и импортирайте навигирайте помощна програма от библиотеката "svelte-routing" и дефинирайте променлива enteredWord.
<сценарий>
import { navigate } от "svelte-routing";
нека enteredWord;
сценарий>
Под сценарий етикет, създайте главен елемент с класа "начална страница", след което създайте a див елемент с класа "речник-текст".
<основенклас="начална страница">
<дивклас="речник-текст">Речникдив>
основен>
След това създайте формуляр с an на: изпратете директива. Този формуляр трябва да съдържа две деца: an вход елемент, чиято стойност е обвързана с enteredWord променлива и бутон за изпращане, който се изобразява условно веднага щом потребителят започне да въвежда:
<формана: изпратете|предотврати по подразбиране={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<вход
тип="текст"
свързване: стойност={въведена дума}
placeholder="Започнете търсенето..."
автофокус
/>
{#ако е въведена дума}
<бутонТип="Изпращане">Дума за търсенебутон>
{/if}
форма>
Този кодов блок използва навигирайте функция за пренасочване на потребителя, след като действието за изпращане приключи. Сега отворете Значение.svelte файл и в маркера на скрипта експортирайте дума опора и създаване на съобщение за грешка променлива:
износ нека дума;
let errorMessage = "Няма връзка. Проверете вашия интернет";
След това направете GET заявка към API на речника, предавайки дума като параметър:
асинхроненфункцияgetWordMeaning(дума) {
конст отговор = изчакайте извличане (
` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
);конст json = изчакайте response.json();
конзола.log (json);ако (response.ok) {
връщане json;
} друго {
съобщение за грешка = json.message;
хвърлямновГрешка(json);
}
}
позволявам обещание = getWordMeaning (дума);
В кодовия блок по-горе асинхронната функция връща JSON данни, ако отговорът е успешен. Променливата обещание представлява резултата от getWordMeaning функция при извикване.
В маркирането дефинирайте div с класа значение-страница. След това дефинирайте елемент h1, който съдържа дума променлива с малки букви:
<дивклас="смисъл-страница">
<h1>
{word.toLowerCase()}
h1>
див>
След това използвайте блоковете за изчакване на Svelte, за да извикате getWordMeaning функция:
{#чакайте обещание}
<стр>Зареждане...стр>
{:след това записи}
{:улов}
{съобщение за грешка}
{/чакай}
Този код показва Зареждане... текст кога се прави заявката GET към API. Ако има грешка, ще покаже съдържанието на съобщение за грешка.
В {:след това записи} блок, добавете следното:
{#всеки записи като запис}
{#each entry.meanings като значение}
<дивклас="влизане">
<дивклас="част от реч">
{meaning.partOfSpeech}
див><ол>
{#всяко значение.дефиниции като дефиниция}
<ли>
{definition.definition}
<бр />
<дивклас="пример">
{#if definition.example}
{definition.example}
{/if}
див>
ли>
{/всеки}
ол>
див>
{/всеки}
{/всеки}
Ако обещанието се разреши успешно, записи променливата съдържа получените данни.
След това за всяка итерация на влизане и значение, този код изобразява частта от речта, използвайки значение.partOfSpeech и списък с дефиниции, използващи определение.определение. Той също така ще изобрази примерно изречение, ако има такова.
Това е. Създадохте речниково приложение за една страница (SPA), използвайки изтънчено маршрутизиране. Можете да продължите нещата, ако искате, или можете да проверите елегантен навигатор, вилица от елегантно маршрутизиране.
Подобряване на потребителското изживяване с маршрутизиране от страна на клиента
Има много предимства при обработката на маршрутизирането в браузъра вместо в сървъра. Приложенията, които използват маршрутизиране от страна на клиента, могат да се чувстват по-плавни за крайния потребител, особено когато са съчетани с анимации и преходи.
Въпреки това, ако искате уебсайтът ви да се класира по-високо в търсачките, трябва да помислите за обработка на маршрути на сървъра.
