Внедрете системата за маршрутизиране за вашето приложение с помощта на това ръководство.
SvelteKit е рамка за изграждане на уеб приложения от всякакъв размер, с голям опит в разработката и гъвкаво базирано на файлове маршрутизиране. Рамката съчетава предимствата на SEO и прогресивното подобрение на едностраничните приложения с бързата навигация на рендирани от страна на сървъра приложения. Една от критичните характеристики на SvelteKit е неговата система за маршрутизиране.
Разбиране на маршрутизирането на SvelteKit
SvelteKit е рамка построен на върха на Свелте. В SvelteKit маршрутизирането следва файлово-базирана система. Това означава, че структурата на директориите на вашите страници определя маршрутите на вашето приложение.
За да разберете по-добре системата за маршрутизиране на SvelteKit, първо създайте проект SvelteKit. За да направите това, изпълнете следния код във вашия терминал:
npm create svelte@latest my-app
След като стартирате кодовия блок по-горе, ще отговорите на поредица от подкани, за да конфигурирате приложението си.
След това инсталирайте необходимите зависимости за вашия проект. Да го направя cd във вашия проект и стартирайте:
npm install
Отворете проекта на сървъра за разработка, като изпълните следната команда във вашия терминал:
npm run dev
Сега вашият проект ще започне да работи http://localhost: 5173/. Когато отворите приложението на вашия сървър за разработка, ще имате интерфейс, подобен на изображението по-долу.
Основният маршрут на проекта ‘/’ съответства на файл с име +страница.svelte. Можете да намерите +страница.svelte файл, следващ пътя на файла; src/маршрути във вашия проект.
За да създадете различни маршрути в SvelteKit, можете да създадете папки във вашия src/маршрути указател. Всяка папка ще съответства на различен маршрут. Генерирайте a +страница.svelte файл във всяка папка, за да определите съдържанието на този маршрут.
<main>
<h2> This is the about page h2>
main>
Кодът по-горе ще живее вътре в +страница файл. Ще създадете елегантен файл вътре в относно папка в src/маршрути указател. Този файл ще съдържа съдържанието на маршрута. За да видите маршрута във вашия уеб браузър, навигирайте до http://localhost: 5173/около.
Навигиране до /about route ще покаже този интерфейс на вашия екран:
Разбиране на вложените маршрути
Вложените маршрути са начин за структуриране на системата за маршрутизиране в уеб приложение. В структурата на вложен маршрут маршрутите се поставят в други маршрути, създавайки йерархична връзка между тях. Можете да създадете вложени маршрути в SvelteKit, като поставите папки с +страница.svelte файл в други папки на маршрута под src/маршрути указател.
Например:
В този пример влагате пост маршрут в рамките на блог маршрут. За да вложите пост маршрут в рамките на блог маршрут, създайте пост папка и нейната +страница.svelte файл вътре в блог папка с маршрут.
За достъп до маршрута на блога във вашето приложение отворете уеб браузъра си и отворете http://localhost: 5173/блог.
Пощенският маршрут ще бъде достъпен на http://localhost: 5173/блог/пост.
Оформления и маршрути за грешки
SvelteKit дефинира a оформление за приложението по начин, подобен на Next.js. И двете рамки използват a оформление компонент за определяне на структурата на приложението.
SvelteKit използва +layout.svelte за определяне на оформление за група от страници. Можете да създадете a +layout.svelte файл в src/маршрути директория, за да определите оформление за всички страници във вашето приложение или в поддиректория, за да определите оформление за конкретна група страници.
Ето пример как да дефинирате маршрут на оформление за цялото ви приложение:
Примерът по-горе предоставя маршрут на оформление. Файлът съдържа a h1 елемент, който показва текста „Това е приложение на SvelteKit.“ Той също така включва a слот елемент. The слот елемент е специален елемент, който определя местоположението, където приложението ще визуализира съдържанието на вашите маршрути в рамките на оформлението. Работи по същия начин като компонентите на Vue.
В този случай вашето приложение ще визуализира съдържанието на вашите маршрути под h1 елемент.
За да дефинирате страница за грешка, създайте файл с име +грешка.svelte в src/маршрути указател. Тази страница ще се покаже, когато възникне грешка по време на рендиране.
Например:
Когато срещнете грешка, като навигиране до несъществуващ маршрут, приложението ви ще се върне към този грешка маршрут вместо това.
Например:
Маршрутът http://localhost: 5173/го не съществува, така че приложението изобразява грешка маршрут вместо това.
Навигация между страници
Намирането на най-добрия начин за навигиране между маршрутите, които създавате, е от решаващо значение за доброто изживяване. Традиционно базираното на файлове маршрутизиране в повечето технологии използва връзки за навигация между различни страници. За да навигирате между страниците в SvelteKit, можете да използвате прост HTML anchor таг.
Например, можете да напишете този код във всеки маршрут, който искате, но трябва да го напишете в оформление маршрут над слот таг:
<ul>
<li>
<ahref="/">Homea>
li>
<li>
<ahref="/about">Abouta>
li>
<li>
<ahref="/blog">Bloga>
li>
<li>
<ahref="/blog/post">Posta>
li>
ul>
Щракването върху който и да е маркер за котва ще ви навигира до съответния маршрут.
Динамично маршрутизиране в SvelteKit
Динамичното маршрутизиране ви позволява постепенно да създавате маршрути, генерирани от приложението въз основа на данни или параметри. Тя ви позволява да създавате гъвкави и динамични уеб приложения, които обработват различни маршрути и показват съдържание според конкретни данни или параметри.
За да създадете динамичен маршрут в SvelteKit, създайте папка с име [охлюв] и след това a +страница.svelte файл в папката, за да определите съдържанието на маршрута. Обърнете внимание, че можете да наименувате папката както желаете, но винаги поставяйте името в скоби [ ].
Ето пример за динамичен маршрут:
За достъп до този маршрут във вашия уеб браузър отидете на тази връзка http://localhost: 5173/[охлюв], където [охлюв] може да бъде всяко уникално недефинирано име на маршрут, което изберете.
Можете да получите достъп до вашето приложение [охлюв] параметър с помощта на $page.params данни от $app/магазини.
Например:
<scriptlang='ts'>
import { page } from '$app/stores'const params = $page.params;
script>
<main>
<h1>This is the {params.slug} pageh1>
main>
Тук присвоявате $page.params възразявам срещу парам променлива и изобразете param.slug данни във вашето приложение.
Приложението извлича param.slug данни от вашата връзка. Например, ако навигирате до http://localhost: 5173/пожар, съдържанието, показано в приложението, ще бъде „Това е огнената страница.“
Сега знаете основите на маршрутизирането в SvelteKit
Маршрутизирането в SvelteKit е мощна функция, която ви позволява да структурирате приложението си по начин, който има смисъл. Разбирането как да използвате тази функция ще ви позволи да създавате по-ефективни и удобни за потребителя уеб приложения. Независимо дали създавате малък личен проект или широкомащабно приложение, системата за маршрутизиране на SvelteKit има инструментите, от които се нуждаете, за да успеете.
