Маршруты: страницы +page.svelte
Маршрут — соответствие между адресом в браузере и кодом, который показывает страницу. В SvelteKit маршруты задаются папками: путь от src/routes до файла +page.svelte и есть адрес страницы. Отдельного файла со списком маршрутов нет.
С этой главы мы делаем небольшой блог в том же проекте: список статей, страница статьи, форма добавления.
Папки и адреса
| Файл | Адрес |
|---|---|
src/routes/+page.svelte | / |
src/routes/about/+page.svelte | /about |
src/routes/blog/+page.svelte | /blog |
src/routes/blog/new/+page.svelte | /blog/new |
Новая страница
Специальной команды нет: создайте папку src/routes/blog и в ней файл +page.svelte:
<!-- src/routes/blog/+page.svelte -->
<h1>Блог</h1>
<p>Здесь будут статьи.</p>Откройте http://localhost:5173/blog — появится заголовок «Блог». Сервер разработки подхватывает новые папки сразу, перезапускать его не нужно.
Ссылки
Для перехода между страницами используется обычный тег a:
<!-- src/routes/+page.svelte -->
<h1>Главная</h1>
<a href="/blog">Читать блог</a>
<a href="/about">О сайте</a>Щёлкните «Читать блог» — адрес сменится на /blog. SvelteKit перехватывает клики по ссылкам на свой сайт и подменяет только содержимое, без полной перезагрузки страницы. Если же открыть адрес напрямую, страница придёт с сервера уже готовой — это называется серверной отрисовкой (SSR).
Переход из кода
Иногда переходить нужно не по клику на ссылку, а после действия — например, после сохранения. Для этого есть функция goto из модуля $app/navigation:
<!-- src/routes/about/+page.svelte -->
<script>
import { goto } from '$app/navigation';
</script>
<h1>О сайте</h1>
<button onclick={() => goto('/blog')}>К статьям</button>Кнопка откроет /blog так же, как ссылка. Для обычной навигации всё же предпочитайте a: ссылки работают без JavaScript и понятны поисковикам.
Служебные файлы
В папке маршрута могут лежать и другие файлы с плюсом в начале: +layout.svelte, +page.js, +page.server.js, +server.js, +error.svelte. Каждому посвящён отдельный урок этой главы. Обычные файлы без плюса SvelteKit игнорирует, поэтому рядом можно хранить компоненты, нужные только этой странице.
Частая ошибка
Создать файл src/routes/blog.svelte, ожидая страницу /blog. SvelteKit не строит маршрут из имени файла — нужна папка blog и в ней +page.svelte. Адрес вернёт 404, пока структура не исправлена.