Введение в маршрутизацию в Svelte

Svelte — это быстрорастущая веб-инфраструктура, которую вы можете использовать для создания веб-сайтов. Он представляет собой легкую и простую в использовании альтернативу популярным платформам, таким как React и Vue.

Каждая популярная среда JavaScript имеет сопутствующую библиотеку, которую вы можете использовать для маршрутизации. Узнайте, как Svelte позволяет вам управлять вашими URL-адресами и кодом, который их обрабатывает.

Популярные библиотеки маршрутизации

Самая популярная библиотека маршрутизации для React — React Router., созданный командой Remix. Для VueJS есть Vue Router, который дает разработчику полный контроль над любой навигацией. В мире Svelte самой популярной библиотекой маршрутизации является стройная маршрутизация.

Другая основная библиотека маршрутизации для Svelte — стройный навигатор. Так как это форк стройная маршрутизация, полезно сначала узнать об этой библиотеке.

Как работает библиотека svelte-routing

Есть три важных компонента для обработки маршрутов в Svelte: Маршрутизатор, Связь, и Маршрут. Чтобы использовать их в своем приложении, вы можете просто импортировать эти утилиты из стройная маршрутизация библиотека.

<сценарий>
импортировать {Route, Router, Link} из "svelte-routing";
сценарий>

Компонент Router может иметь два дополнительных реквизита: базовый путь и URL. базовый путь свойство похоже на базовое имя prop в React Router.

По умолчанию установлено значение «/». basepath может пригодиться, если ваше приложение имеет несколько точек входа. Например, рассмотрим следующий код Svelte:

<сценарий>
 импортировать {Route, Router, Link} из "svelte-routing";
 пусть базовый путь = "/пользователь";
 пусть путь = местоположение.путь;
сценарий>
<Маршрутизатор {базовый путь}>
<дивпо щелчку={() => (путь = местоположение.путь)}>
<Связьк="/">Иди домойСвязь>
<Связьк="/пользователь/Дэвид">Войти как ДавидСвязь>
див>
<основной>
 Вы здесь: <код>{путь}код>
<Маршрутпуть="/">
<h1>Добро пожаловать домой!h1>
Маршрут>
<Маршрутпуть="/Дэйвид">
<h1>Привет David!h1>
Маршрут>
основной>
Маршрутизатор>

Если вы запустите этот код, вы заметите, что при нажатии кнопки Иди домой кнопка, браузер переходит к базовому пути "/user". Маршрут определяет компонент, который должен отображаться, если путь соответствует значению в указанном Маршрут опора

Вы можете определить, какие элементы отображать внутри компонента Route или как отдельные элементы. .svelte файл, если вы правильно импортируете этот файл. Например:

<Маршрутпуть="/о"компонент={О}/>

Приведенный выше блок кода указывает браузеру отображать Приложение компонент, когда имя пути "/about".

Когда используешь стройная маршрутизация, определите внутренние ссылки с помощью Связь компонент вместо традиционного HTML а элементы.

Это похоже на то, как React Router обрабатывает внутренние ссылки; каждый компонент Link должен иметь к prop, который сообщает браузеру, по какому пути перейти.

Когда браузер отображает компонент Svelte, Svelte автоматически преобразует все компоненты Link в эквивалентные а элементы, заменяющие к опора с href атрибут. Это означает, что когда вы пишете следующее:

<Связьк="/некоторые/путь">Это компонент Link в svelte-routing.Связь>

Svelte представляет его браузеру как:

<аhref="/некоторые/путь">Это компонент Link в svelte-routing.а>

Вы должны использовать компонент Link вместо традиционного а элемент при работе с svelte-routing. Это потому что а элементы выполняют перезагрузку страницы по умолчанию.

Создание SPA с помощью Svelte и Svelte-Routing

Пришло время применить все, что вы узнали, на практике, создав простое приложение-словарь, позволяющее пользователю искать слова. Этот проект будет использовать бесплатную Словарь API.

Для начала убедитесь, что на вашем компьютере установлена ​​Yarn, и запустите:

пряжа создать вите

Это создаст новый проект, используя инструмент сборки Vite. Назовите свой проект, затем выберите «Svelte» в качестве фреймворка и «JavaScript» в качестве варианта. После этого выполните следующие команды одну за другой:

CD
пряжа
пряжа добавить svelte-routing
пряжа разработчик

Далее удаляем содержимое App.svelte файл и измените структуру проекта, чтобы она выглядела следующим образом:

На иллюстрации выше видно, что есть папка «components» с двумя файлами: Home.svelte и Значение.svelte. Значение.svelte это компонент, который будет отображаться, когда пользователь ищет слово.

Перейдите к App.svelte файл и импортируйте компоненты Route, Router и Link из библиотеки svelte-routing. Также не забудьте импортировать Home.svelte и App.svelte компоненты.

<сценарий>
 импортировать {Route, Router, Link} из "svelte-routing";
 импортировать Home из "./components/Home.svelte";
 импортировать значение из "./components/Meaning.svelte";
сценарий>

Затем создайте компонент маршрутизатора, который обертывает основной HTML-элемент с классом «приложение».

<Маршрутизатор>
<основнойсорт="приложение">
основной>
Маршрутизатор>

в основной элемент, добавьте навигация элемент с компонентом Link в качестве его дочернего элемента. Свойство "to" этого компонента Link должно указывать на "/". Этот компонент позволит пользователю перейти на домашнюю страницу.

<основнойсорт="приложение">
<навигация>
<Связьк="/">ДомСвязь>
навигация>
основной>

Пришло время поработать над маршрутами. Когда пользователь загружает приложение, Дом компонент должен отображать.

Переход к «/find/:word» должен отобразить Значение компонент. Предложение ":word" является параметром пути.

Для этого проекта вам не нужно беспокоиться о CSS. Просто замените содержимое своим app.css файл с содержимым app.css файл из этот репозиторий GitHub.

Пришло время определить маршруты. Путь корневого уровня должен отображать Дом компонент, в то время как "/find/:word" должен отображать Значение компонент.

<Маршрутпуть="/"компонент={Дом} />
<Маршрутпуть="/найти/:слово"пусть: параметры>
<Значениеслово={параметры.слово} />
Маршрут>

Этот блок кода использует позволять директива для передачи параметра "слово" в Значение компонент в качестве реквизита.

Теперь откройте Home.svelte файл и импортировать ориентироваться утилиту из библиотеки "svelte-routing" и определить переменную введенное слово.

<сценарий>
 импортировать {навигацию} из "svelte-routing";
 пусть вошел Word;
сценарий>

Под сценарий тег, создайте основной элемент с классом «домашняя страница», затем создайте див элемент с классом "словарь-текст".

<основнойсорт="домашняя страница">
<дивсорт="словарь-текст">Словарьдив>
основной>

Далее создайте форму с на: отправить директива. Эта форма должна содержать двух дочерних элементов: вход элемент, значение которого привязано к введенное слово переменная и кнопка отправки, которая условно отображается, как только пользователь начинает печатать:

<формана: отправить|предотвращениепо умолчанию={() => перейти(`/find/${enteredWord.toLowerCase()}`)}>
<вход
 тип = "текст"
 привязка: значение = {введенное слово}
 placeholder="Начните поиск..."
 автофокус
 />
 {#если введено слово}
<кнопкатип="представлять на рассмотрение">Поиск словакнопка>
 {/если}
форма>

Этот блок кода использует ориентироваться функция для перенаправления пользователя после завершения действия отправки. Теперь откройте Значение.svelte файл и в теге script экспортировать слово поддержите и создайте сообщение об ошибке переменная:

экспортировать пусть слово;
let errorMessage = "Нет соединения. Проверьте свой интернет";

Затем сделайте запрос GET к API словаря, передав слово как параметр:

асинхронныйфункцияgetWordЗначение(слово) {
константа ответ = Ждите принести(
` https://api.dictionaryapi.dev/api/v2/entries/en/${слово}`
 );
константа json = Ждите ответ.json();
консоль.лог (json);
если (ответ.хорошо) {
возвращаться json;
 } еще {
 сообщение об ошибке = json.message;
бросатьновыйОшибка(жсон);
 }
 }
позволять обещание = getWordMeaning (слово);

В приведенном выше блоке кода асинхронная функция возвращает данные JSON, если ответ успешен. Переменная обещания представляет собой результат getWordЗначение функция при вызове.

В разметке определите div с классом смысловая страница. Затем определите элемент h1, который содержит слово переменная в нижнем регистре:

<дивсорт="страница смысла">
<h1>
 {word.toLowerCase()}
h1>
див>

Затем используйте блоки ожидания Svelte для вызова getWordЗначение функция:

{#ждём обещания}
<п>Загрузка...п>
{:затем записи}
{:ловить}
 {сообщение об ошибке}
{/Ждите}

Этот код отображает Загрузка... текст, когда делается запрос GET к API. Если есть ошибка, он покажет содержимое сообщение об ошибке.

в {:затем записи} блок, добавьте следующее:

{#каждая запись как запись}
 {#каждая запись.значения как значение}
<дивсорт="вход">
<дивсорт="часть речи">
 {значение.partOfSpeech}
див>
<ол>
 {#каждое значение.definitions как определение}
<ли>
 {определение.определение}
<бр />
<дивсорт="пример">
 {#if определение.пример}
 {определение.пример}
 {/если}
див>
ли>
 {/каждый}
ол>
див>
 {/каждый}
{/каждый}

Если обещание успешно разрешается, записи переменная содержит результирующие данные.

Затем для каждой итерации вход и значение, этот код отображает часть речи, используя значение.partOfSpeech и список определений с использованием определение.определение. Он также отобразит пример предложения, если он доступен.

Вот и все. Вы создали одностраничное приложение словаря (SPA) с помощью svelte-routing. Вы можете пойти дальше, если хотите, или вы можете проверить стройный навигатор, вилка стройная маршрутизация.

Улучшение взаимодействия с пользователем с помощью маршрутизации на стороне клиента

Существует много преимуществ обработки маршрутизации в браузере, а не на сервере. Приложения, использующие маршрутизацию на стороне клиента, могут показаться конечным пользователям более плавными, особенно в сочетании с анимацией и переходами.

Однако, если вы хотите, чтобы ваш сайт занимал более высокие позиции в поисковых системах, вам следует рассмотреть возможность обработки маршрутов на сервере.