Понякога може да мислим, че технологията на уеб компонентите не е за замяна на популярни рамки. Но повечето от най-желаните функции могат лесно да бъдат доставени с библиотека на трета страна или малко количество собствен код. Една от тези функции е маршрутизирането от страна на клиента. Не винаги се използва, но повечето фронтенд рамки го имат и разработчиците го използват. И какво става с уеб компонентите тук? Нека сами да го внедрим с помощта на навигационната библиотека.

Ако работите с Windows OS, използвайте интеграция на git unix tools или WSL, за да изпълните всички команди, както са предоставени в тази статия.

Първо нека създадем проекта:

mkdir testnavigo
cd testnavigo
npm init

и натиснете клавиша Enter, докато не ви пусне;)

след това инсталирайте библиотеката

npm i navigo — save

и създайте файл index.html

ще включим библиотеката и ще създадем основния клас на приложението, след което ще капсулираме логиката на маршрутизиране и ще контролираме всички деца.

Уеб компонентите ни позволяват да разчитаме на автоматично извиквани функции, наречени кукички, които ще бъдат задействани, когато компонентът бъде добавен към DOM дървото. Ще инициираме библиотека за маршрутизиране, използвайки тази кука.

нека добавим обработката на маршрутите:

При всяка промяна на маршрута основният ни компонент ще рендира нови тагове на страница в себе си. Трябва само да ги дефинираме и регистрираме.

След това добавяме връзки за превключване на страници:

<a href=”page-a” data-navigo>Page A</a>
<a href=”page-b” data-navigo>Page B</a>

атрибут data-navigo казва на библиотеката да обработва тези връзки и да не позволява да прави това от бекенда. Време е да стартирате бекенда)!

npx http-server

от сега можем да отворим http://127.0.0.1:8080 (или това, което ви казва) в браузъра.

Засега можем да разделим всичко в модулни файлове, да добавим шаблони, динамично зареждане и всичко необходимо. Уеб компонентите ще се справят с нашия жизнен цикъл на арката, но не забравяйте да развържете събития в disconnectedCallback()кука.

Тъй като щях да кажа колко бързо и лесно е, няма да описвам всичко в тази статия. Така че може да последват още няколко статии.

Можете да проверите кода в следното bitbucket repo: https://bitbucket.org/techminded/testnavigo/