Водич за рутирање у СвелтеКит-у

СвелтеКит је оквир за прављење веб апликација свих величина, са великим развојним искуством и флексибилним рутирањем заснованим на датотекама. Оквир комбинује предности оптимизације апликација за једну страницу и прогресивног побољшања са брзом навигацијом кроз апликације које се приказују на страни сервера. Једна од критичних карактеристика СвелтеКит-а је његов систем рутирања.

Разумевање СвелтеКит рутирања

СвелтеКит је оквир саграђен на врху Свелте. У СвелтеКит-у, рутирање прати систем заснован на датотекама. То значи да структура директоријума ваших страница одређује руте ваше апликације.

Да бисте боље разумели СвелтеКит систем рутирања, прво креирајте СвелтеКит пројекат. Да бисте то урадили, покрените следећи код у свом терминалу:

npm create svelte@latest my-app

Након што покренете горњи блок кода, одговорићете на низ упита да конфигуришете своју апликацију.

Затим инсталирајте потребне зависности за ваш пројекат. Да уради ово цд у свој пројекат и покрените:

npm install

Отворите пројекат на развојном серверу тако што ћете покренути следећу команду у свом терминалу:

npm run dev

Сада ће ваш пројекат бити у функцији http://localhost: 5173/. Када отворите апликацију на свом развојном серверу, имаћете интерфејс сличан слици испод.

Основна рута пројекта ‘/’ одговара датотеци под називом +паге.свелте. Можете пронаћи +паге.свелте датотека која прати путању датотеке; срц/руте у вашем пројекту.

Да бисте креирали различите руте у СвелтеКит-у, можете креирати фасцикле у свом срц/руте именик. Сваки фолдер ће одговарати различитој рути. Генеришите а +паге.свелте датотеку у свакој фасцикли да бисте дефинисали садржај те руте.

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

Код изнад ће живети унутар +страница фајл. Направићете елегантну датотеку унутар О томе фолдер у срц/руте именик. Ова датотека ће садржати садржај за руту. Да бисте видели руту у свом веб претраживачу, идите на http://localhost: 5173/о.

Навигација до /about рута ће приказати овај интерфејс на вашем екрану:

Разумевање угнежђених рута

Угнежђене руте су начин да се структурира систем рутирања у веб апликацији. У структури угнежђене руте, руте се постављају унутар других рута, стварајући хијерархијски однос између њих. Можете креирати угнежђене руте у СвелтеКит-у постављањем фасцикли са +паге.свелте датотеку унутар других фасцикли рута испод срц/руте именик.

На пример:

У овом примеру, угнездите пошта рута унутар блог рута. Да угнезди пошта рута унутар блог руту, креирајте пошта фасциклу и њен +паге.свелте фајл унутар блог фолдер руте.

Да бисте приступили рути блога у својој апликацији, отворите веб прегледач и идите на http://localhost: 5173/блог.

Поштанска рута ће бити доступна на http://localhost: 5173/блог/пост.

Распореди и путање грешака

СвелтеКит дефинише а распоред за апликацију на сличан начин као Нект.јс. Оба оквира користе а распоред компонента за дефинисање структуре апликације.

СвелтеКит користи +лаиоут.свелте да дефинишете изглед за групу страница. Можете креирати а +лаиоут.свелте фајл у срц/руте директоријум да дефинишете изглед за све странице у вашој апликацији или у поддиректоријуму да дефинишете изглед за одређену групу страница.

Ево примера како да дефинишете руту изгледа за целу апликацију:

Горњи пример даје руту распореда. Датотека садржи а х1 елемент који приказује текст „Ово је СвелтеКит апликација.“ Такође укључује а слот елемент. Тхе слот елемент је посебан елемент који дефинише локацију на којој ће апликација приказати садржај ваших рута унутар распореда. Ради на исти начин као и Вуе компоненте.

У овом случају, ваша апликација ће приказати садржај ваших рута испод х1 елемент.

Да бисте дефинисали страницу са грешком, креирајте датотеку под називом +еррор.свелте у срц/руте именик. Ова страница ће се приказати када дође до грешке током рендеровања.

На пример:

Када наиђете на грешку, као што је навигација до непостојеће руте, ваша апликација ће се вратити на ову грешка уместо тога.

На пример:

Траса http://localhost: 5173/го не постоји, па апликација приказује грешка уместо тога.

Навигација између страница

Проналажење најбољег начина за навигацију између рута које креирате је кључно за добро искуство. Традиционално, рутирање засновано на датотекама у већини технологија користи везе за навигацију између различитих страница. Да бисте се кретали између страница у СвелтеКит-у, можете користити једноставну ХТМЛ ознаку сидрења.

На пример, овај код можете написати на било којој рути коју желите, али би требало да га упишете у распоред рута изнад слот ознака:

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

Кликом на било коју ознаку сидра ће вас навигирати до одговарајуће руте.

Динамичко рутирање у СвелтеКит-у

Динамичко рутирање вам омогућава да прогресивно креирате руте које апликација генерише на основу података или параметара. Омогућава вам да креирате флексибилне и динамичне веб апликације које рукују различитим рутама и приказују садржај према одређеним подацима или параметрима.

Да бисте креирали динамичку руту у СвелтеКит-у, направите фасциклу под називом [пуж] а затим а +паге.свелте датотеку у фасцикли да бисте дефинисали садржај руте. Имајте на уму да фасциклу можете именовати како год желите, али водите рачуна да име увек умотате у заграде [ ].

Ево примера динамичке руте:

Да бисте приступили овој рути у свом веб претраживачу, идите на ову везу http://localhost: 5173/[пуж], где [пуж] може бити било које јединствено недефинисано име руте које изаберете.

Можете приступити својим апликацијама [пуж] параметар помоћу $паге.парамс подаци из $апп/сторес.

На пример:

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

Овде додељујете $паге.парамс приговор на парам променљива и рендер тхе парам.слуг податке у вашој апликацији.

Апликација преузима парам.слуг податке са ваше везе. На пример, ако идете на http://localhost: 5173/пожар, садржај приказан у апликацији ће бити "Ово је ватрена страница."

Сада знате основе рутирања у СвелтеКит-у

Рутирање у СвелтеКит-у је моћна функција која вам омогућава да структурирате своју апликацију на начин који има смисла. Разумевање како да користите ову функцију ће вам омогућити да креирате ефикасније и једноставније веб апликације. Било да креирате мали лични пројекат или апликацију великих размера, СвелтеКит-ов систем рутирања има алате који су вам потребни за успех.