Руководство по маршрутизации в SvelteKit

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

Понимание маршрутизации SvelteKit

SvelteKit — это фреймворк построен на основе Svelte. В SvelteKit маршрутизация следует файловой системе. Это означает, что структура каталогов ваших страниц определяет маршруты вашего приложения.

Чтобы лучше понять систему маршрутизации SvelteKit, сначала создайте проект SvelteKit. Для этого запустите в терминале следующий код:

npm create svelte@latest my-app

После запуска приведенного выше блока кода вы ответите на ряд запросов по настройке приложения.

Затем установите необходимые зависимости для вашего проекта. Сделать это CD в свой проект и запустите:

npm install

Откройте проект на сервере разработки, выполнив в терминале следующую команду:

npm run dev

Теперь ваш проект будет работать http://localhost: 5173/. Когда вы откроете приложение на своем сервере разработки, вы увидите интерфейс, похожий на изображение ниже.

Корневой маршрут проекта ‘/’ соответствует файлу с именем +page.svelte. Вы можете найти +page.svelte файл по пути к файлу; источник/маршруты в вашем проекте.

Для создания различных маршрутов в SvelteKit вы можете создавать папки в источник/маршруты каталог. Каждая папка будет соответствовать отдельному маршруту. Создать +page.svelte файл в каждой папке, чтобы определить содержимое этого маршрута.

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

Приведенный выше код будет жить внутри +страница файл. Вы создадите стройный файл внутри о папка в источник/маршруты каталог. Этот файл будет содержать содержимое маршрута. Чтобы просмотреть маршрут в веб-браузере, перейдите к http://localhost: 5173/об.

Переход к /about route отобразит этот интерфейс на вашем экране:

Понимание вложенных маршрутов

Вложенные маршруты — это способ структурировать систему маршрутизации в веб-приложении. В структуре вложенных маршрутов маршруты размещаются внутри других маршрутов, создавая между ними иерархическую связь. Вы можете создавать вложенные маршруты в SvelteKit, помещая папки с +page.svelte файл внутри других папок маршрута под источник/маршруты каталог.

Например:

В этом примере вы вкладываете почта маршрут в пределах блог маршрут. Чтобы вложить почта маршрут в пределах блог маршрут, создать почта папка и ее +page.svelte файл внутри блог папка маршрута.

Чтобы получить доступ к маршруту блога в своем приложении, откройте веб-браузер и перейдите к http://localhost: 5173/блог.

Почтовый маршрут будет доступен по адресу http://localhost: 5173/блог/сообщение.

Макеты и маршруты ошибок

SvelteKit определяет макет для приложения аналогично Next.js. Оба фреймворка используют макет Компонент для определения структуры приложения.

SvelteKit использует +layout.svelte чтобы определить макет для группы страниц. Вы можете создать +layout.svelte файл в источник/маршруты каталог, чтобы определить макет для всех страниц в вашем приложении или в подкаталоге, чтобы определить макет для определенной группы страниц.

Вот пример того, как определить маршрут макета для всего вашего приложения:

В приведенном выше примере показан маршрут макета. Файл содержит h1 элемент, отображающий текст «Это приложение SvelteKit». Он также включает в себя слот элемент. слот element — это специальный элемент, определяющий место, где приложение будет отображать содержимое ваших маршрутов в макете. Он работает так же, как компоненты Vue..

В этом случае ваше приложение будет отображать содержимое ваших маршрутов ниже h1 элемент.

Чтобы определить страницу ошибки, создайте файл с именем +ошибка.svelte в источник/маршруты каталог. Эта страница будет отображаться при возникновении ошибки во время рендеринга.

Например:

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

Например:

Маршрут http://localhost: 5173/го не существует, поэтому приложение отображает ошибка маршрут вместо этого.

Навигация между страницами

Поиск наилучшего способа навигации между созданными вами маршрутами имеет решающее значение для хорошего опыта. Традиционно маршрутизация на основе файлов в большинстве технологий использует ссылки для навигации между разными страницами. Для навигации между страницами в SvelteKit вы можете использовать простой HTML-тег привязки.

Например, вы можете написать этот код в любом маршруте, который вы хотите, но вы должны написать его в макет маршрут над слот ярлык:

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

Нажав на любой тег привязки, вы перейдете к соответствующему маршруту.

Динамическая маршрутизация в SvelteKit

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

Чтобы создать динамический маршрут в SvelteKit, создайте папку с именем [слаг] а затем +page.svelte файл в папке, чтобы определить содержимое маршрута. Обратите внимание, что вы можете назвать папку как угодно, но всегда заключайте имя в квадратные скобки [ ].

Вот пример динамического маршрута:

Чтобы получить доступ к этому маршруту в веб-браузере, перейдите по этой ссылке http://localhost: 5173/[слаг], где [слаг] может быть любым уникальным неопределенным именем маршрута, которое вы выберете.

Вы можете получить доступ к своему приложению [слаг] параметр с помощью $page.params данные из $ приложение/магазины.

Например:

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

Здесь вы назначаете $page.params возражать против параметр переменная и визуализировать параметр.slug данные в вашем приложении.

Приложение извлекает параметр.slug данные по вашей ссылке. Например, если вы перейдете к http://localhost: 5173/огонь, содержимое, отображаемое в приложении, будет «Это пожарная страница».

Теперь вы знаете основы маршрутизации в SvelteKit

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