Увод у рутирање у Свелтеу

Свелте је брзорастући веб оквир који можете користити за прављење веб локација. Представља се као лагана алтернатива популарним оквирима као што су Реацт и Вуе, лака за коришћење.

Сваки популарни ЈаваСцрипт оквир има пратећу библиотеку коју можете користити за рутирање. Откријте како Свелте вам омогућава да управљате својим УРЛ адресама и кодом који њима управља.

Популарне библиотеке рутирања

Најпопуларнија библиотека рутирања за Реацт је Реацт Роутер, креиран од стране Ремик тима. За ВуеЈС постоји Вуе Роутер који програмеру даје фину контролу над било којом навигацијом. У Свелте свету, најпопуларнија библиотека рутирања је витко-роутинг.

Друга главна библиотека рутирања за Свелте је витки-навигатор. Пошто је то вилица витко-роутинг, корисно је прво научити о тој библиотеци.

Како функционише танана библиотека

Постоје три важне компоненте за руковање рутама у Свелтеу:

Рутер, Линк, и Рута. Да бисте их користили у својој апликацији, можете једноставно да увезете ове услужне програме из витко-роутинг библиотека.

<скрипта>
импорт {Роуте, Роутер, Линк} из "свелте-роутинг";
скрипта>

Компонента рутера може имати два опциона реквизита: басепатх и урл. Тхе басепатх имовина је слична основно име проп у Реацт рутеру.

Подразумевано је постављено на "/". басепатх може бити од користи ако ваша апликација има више улазних тачака. На пример, узмите у обзир следећи Свелте код:

<скрипта>
 импорт { Роуте, Роутер, Линк } из "свелте-роутинг";
 нека басепатх = "/усер";
 нека пут = локација.патхнаме;
скрипта>
<Рутер {басепатх}>
<дивна: клик={() => (путања = локација.назив путање)}>
<Линкдо="/">Иди кућиЛинк>
<Линкдо="/усер/давид">Пријавите се као ДавидЛинк>
див>
<главни>
 Овде си: <код>{пут}код>
<Рутапут="/">
<х1>Добродошли кући!х1>
Рута>
<Рутапут="/давид">
<х1>Здраво Давиде!х1>
Рута>
главни>
Рутер>

Ако покренете овај код, то ћете приметити када кликнете на Иди кући дугме, претраживач прелази на основну путању "/усер". Рута дефинише компоненту која треба да се прикаже ако се путања поклапа са вредношћу у наведеној Рута проп.

Можете дефинисати које елементе желите да прикажете унутар компоненте Роуте или као засебне .свелте датотеку све док је исправно увезете. На пример:

<Рутапут="/О томе"саставни део={О томе}/>

Блок кода изнад говори претраживачу да прикаже Апликација компоненту када је име путање „/абоут“.

Када користиш витко-роутинг, дефинише интерне везе са Линк компонента уместо традиционалног ХТМЛ-а а елемената.

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

Када прегледач прикаже Свелте компоненту, Свелте аутоматски конвертује све компоненте Линка у еквивалентне а елемената, замењујући до подупирач са ан хреф атрибут. То значи да када напишете следеће:

<Линкдо="/неки/пут">Ово је компонента везе у елегантном рутирањуЛинк>

Свелте га представља претраживачу као:

<ахреф="/неки/пут">Ово је компонента везе у елегантном рутирањуа>

Требало би да користите компоненту Линк уместо традиционалне а елемент при раду са витким рутирањем. То је зато а елементи подразумевано извршавају поновно учитавање странице.

Креирање СПА са Свелте и Свелте-Роутинг

Време је да све што сте научили примените у пракси креирањем једноставне апликације речника која омогућава кориснику да тражи речи. Овај пројекат ће користити бесплатно Дицтионари АПИ.

Да бисте започели, проверите да ли је Иарн инсталиран на вашој машини и покрените:

предиво створити вите

Ово ће поставити скелу за нови пројекат користећи Вите алат за прављење. Именујте свој пројекат, а затим изаберите „Свелте“ као оквир и „ЈаваСцрипт“ као варијанту. Након тога, покрените следеће команде једну за другом:

цд
пређе
пређе додати витко-роутинг
иарн дев

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

Из горње илустрације можете видети да постоји фасцикла „компоненте“ са две датотеке: Хоме.свелте и Значење.свелте. Значење.свелте је компонента која ће се приказати када корисник тражи реч.

Идите до Апп.свелте датотеку и увоз компоненти Роуте, Роутер и Линк из свелте-роутинг библиотеке. Такође се побрините да увезете Хоме.свелте и Апп.свелте компоненте.

<скрипта>
 импорт { Роуте, Роутер, Линк } из "свелте-роутинг";
 импорт Хоме фром "./цомпонентс/Хоме.свелте";
 импорт Значење из "./цомпонентс/Меанинг.свелте";
скрипта>

Затим креирајте компоненту рутера која обавија а главни ХТМЛ елемент са класом "апп".

<Рутер>
<главникласа="апликација">
главни>
Рутер>

У главни елемент, додати а нав елемент са компонентом Линк као подређеном. Пропорција "до" ове компоненте везе треба да указује на "/". Ова компонента ће омогућити кориснику да дође до почетне странице.

<главникласа="апликација">
<нав>
<Линкдо="/">КућаЛинк>
нав>
главни>

Сада је време за рад на рутама. Када корисник учита апликацију, Кућа компонента треба да прикаже.

Навигација до „/финд/:ворд“ би требало да прикаже Значење саставни део. Клаузула ":ворд" је параметар путање.

За овај пројекат не морате да бринете о ЦСС-у. Једноставно замените сопствени садржај апп.цсс фајл са садржајем апп.цсс фајл из ово ГитХуб спремиште.

Сада је време да дефинишемо руте. Путања основног нивоа треба да прикаже Кућа компоненту, док "/финд/:ворд" треба да прикаже Значење саставни део.

<Рутапут="/"саставни део={Кућа} />
<Рутапут="/пронађи/: реч"нека: парамс>
<Значењереч={парамс.ворд} />
Рута>

Овај блок кода користи дозволити директива да проследи параметар "ворд" доле у Значење компонента као реквизит.

Сада, отворите Хоме.свелте датотеку и увозите навигирати услужни програм из библиотеке "свелте-роутинг" и дефинише променљиву ентередВорд.

<скрипта>
 импорт { навигате } фром "свелте-роутинг";
 нека ентередВорд;
скрипта>

Под скрипта таг, креирајте главни елемент са класом "почетна страница", а затим креирајте а див елемент са класом „речник-текст”.

<главникласа="Почетна страница">
<дивкласа="речник-текст">Речникдив>
главни>

Затим креирајте образац са ан на: доставити директива. Овај образац треба да садржи два детета: а улазни елемент чија је вредност везана за ентередВорд променљива и дугме за слање које се условно приказује чим корисник почне да куца:

<формуна: доставити|превентДефаулт={() => навигате(`/финд/${ентередВорд.тоЛоверЦасе()}`)}>
<улазни
 типе="тект"
 бинд: валуе={ентередВорд}
 плацехолдер="Започни претрагу..."
 аутофокус
 />
 {#иф ентередВорд}
<дугметип="прихвати">Сеарцх Ворддугме>
 {/ако}
форму>

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

извоз лет ворд;
лет еррорМессаге = "Нема везе. Проверите свој интернет";

Затим направите ГЕТ захтев за АПИ речника који проследи реч као параметар:

асинцфункцијагетВордМеанинг(реч) {
конст одговор = чекати донеси (
` https://api.dictionaryapi.dev/api/v2/entries/en/${ворд}`
 );
конст јсон = чекати респонсе.јсон();
конзола.лог (јсон);
ако (одговор.ок) {
повратак јсон;
 } друго {
 еррорМессаге = јсон.мессаге;
бацитиНоваГрешка(јсон);
 }
 }
дозволити обећање = гетВордМеанинг (реч);

У блоку кода изнад, асинхрона функција враћа ЈСОН податке ако је одговор успешан. Променљива обећања представља резултат гетВордМеанинг функција када се позове.

У маркупу дефинишите див са класом значење-страница. Затим дефинишите х1 елемент који држи реч променљива малим словима:

<дивкласа="значење-страница">
<х1>
 {ворд.тоЛоверЦасе()}
х1>
див>

Затим користите Свелтеове блокове чекања да позовете гетВордМеанинг функција:

{#аваит обећање}
<стр>Учитавање...стр>
{:затим уноси}
{:улов}
 {порука о грешци}
{/чекати}

Овај код приказује Учитавање... текст када ГЕТ захтев је направљен на АПИ. Ако постоји грешка, приказаће се садржај порука о грешци.

У {:затим уноси} блок, додајте следеће:

{#сваки уноси као унос}
 {#еацх ентри.меанингс као значење}
<дивкласа="улазак">
<дивкласа="део говора">
 {меанинг.партОфСпеецх}
див>
<ол>
 {#свако значење.дефиниције као дефиниција}
<ли>
 {дефинитион.дефинитион}
<бр />
<дивкласа="пример">
 {#иф дефинитион.екампле}
 {дефинитион.екампле}
 {/ако}
див>
ли>
 {/сваки}
ол>
див>
 {/сваки}
{/сваки}

Ако се обећање успешно реши, уносе променљива садржи резултујуће податке.

Затим за сваку итерацију од улазак и значење, овај код приказује део говора користећи значење.партОфСпеецх и списак дефиниција које користе дефиниција.дефиниција. Такође ће приказати пример реченице, ако је доступан.

То је то. Направили сте речник Сингле Паге Апплицатион (СПА) коришћењем углађеног рутирања. Можете да идете даље ако желите, или можете да се одјавите витки-навигатор, виљушка од витко-роутинг.

Побољшање корисничког искуства помоћу рутирања на страни клијента

Постоје многе предности рутирања у претраживачу уместо на серверу. Апликације које користе рутирање на страни клијента могу да се осећају глаткије за крајњег корисника, посебно када су упарене са анимацијама и прелазима.

Међутим, ако желите да се ваша веб локација боље рангира у претраживачима, требало би да размислите о руковању рутама на серверу.