Динамические параметры маршрута: [id]
Извлекайте сегменты URL как параметры с помощью скобочной записи в именах папок
«Динамические параметры маршрута: [id]» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Имена папок в квадратных скобках
Используйте квадратные скобки в именах папок для динамических сегментов.
src/routes/blog/[slug]/+page.svelte -> /blog/:slugДоступ к параметру
Внутри страницы используйте хранилище $page из $app/stores.
import { page } from "$app/stores";
<p>Slug: {$page.params.slug}</p>Доступ из функции загрузки
Внутри функции загрузки +page.js используйте params.slug напрямую.
export function load({ params }) { return { slug: params.slug }; }Несколько параметров
Используйте несколько пар квадратных скобок для путей из нескольких сегментов.
src/routes/[lang]/[slug]/+page.svelteПроверка параметров
Возвращайте ответ 404 из функции загрузки, если параметр недействителен.
if (!isValid(params.slug)) error(404, "Not found");Сопоставители
Добавьте сопоставитель в src/params, чтобы проверять параметр с помощью регулярного выражения.
src/routes/blog/[slug=alpha]/+page.svelteОпределение сопоставителя
Создайте src/params/alpha.js, экспортирующий функцию.
export function match(value) { return /^[a-z]+$/.test(value); }SEO с идентификаторами для URL
Идентификаторы для URL обычно безопасны для использования в адресах. Создавайте их из заголовков, чтобы URL были понятными.
Сочетание статических и динамических маршрутов
Размещайте статические папки рядом с динамическими; при конфликте приоритет у статического маршрута.
Типобезопасность
SvelteKit создаёт типы параметров для каждого маршрута, доступные в аргументе функции загрузки.
Предварительный рендеринг динамических маршрутов
Используйте entries в +page.js, чтобы перечислить значения для предварительного рендеринга.
Быстрая проверка
Как объявляются динамические сегменты?
Итоги
Используйте папки [param] для динамических сегментов. Получайте к ним доступ через params в функции загрузки или через $page.params.
Часто задаваемые вопросы
Урок «Динамические параметры маршрута: [id]» бесплатный?
Да — полный текст урока «Динамические параметры маршрута: [id]» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Динамические параметры маршрута: [id]»?
Извлекайте сегменты URL как параметры с помощью скобочной записи в именах папок Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Динамические параметры маршрута: [id]»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Маршрутизация на основе файлов с +page.svelte
- Динамические параметры маршрута: [id]
- Необязательные параметры и параметры остатка
- Файлы макета: +layout.svelte