Маршрутизация на основе файлов с +page.svelte
Автоматически сопоставляйте пути файлов в src/routes с путями URL
«Маршрутизация на основе файлов с +page.svelte» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Файл = маршрут
SvelteKit сопоставляет папки в src/routes с путями URL. Файл +page.svelte задаёт маршрут.
Корневая страница
src/routes/+page.svelte отображается по адресу /.
Страница «О нас»
src/routes/about/+page.svelte отображается по адресу /about.
Вложенные маршруты
Папки могут быть вложенными. src/routes/blog/posts/+page.svelte отображается по адресу /blog/posts.
Компонент страницы
Файл представляет собой обычный компонент Svelte. Используйте любую изученную возможность.
<!-- +page.svelte -->
<h1>About Us</h1>
<p>Welcome to our site.</p>Соглашение о маршрутизации
Имена файлов, начинающиеся с +, имеют в SvelteKit особое значение: +page, +layout, +server и другие.
Импорты не требуются
Вам не нужно регистрировать маршруты вручную. Маршрутизатором служит файловая система.
Программная навигация
Используйте goto из $app/navigation, чтобы переходить между страницами в коде.
import { goto } from "$app/navigation";
goto("/about");Компонент ссылки
Используйте обычные теги <a href>; SvelteKit перехватывает их для навигации на стороне клиента.
Предварительная загрузка
Добавьте data-sveltekit-preload-data к ссылке, чтобы предварительно загружать данные при наведении.
Страница 404
Создайте src/routes/+error.svelte, чтобы настроить страницу не найденного ресурса.
Быстрая проверка
Где создать маршрут /products?
Итоги
Файловая система определяет маршруты. +page.svelte в любой папке внутри src/routes становится маршрутом.
Часто задаваемые вопросы
Урок «Маршрутизация на основе файлов с +page.svelte» бесплатный?
Да — полный текст урока «Маршрутизация на основе файлов с +page.svelte» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Маршрутизация на основе файлов с +page.svelte»?
Автоматически сопоставляйте пути файлов в src/routes с путями URL Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Маршрутизация на основе файлов с +page.svelte»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Маршрутизация на основе файлов с +page.svelte
- Динамические параметры маршрута: [id]
- Необязательные параметры и параметры остатка
- Файлы макета: +layout.svelte