После того, как нам удалось изменить поведение нашего якорного элемента и заставить его вызывать нашу собственную реализацию, пришло время действительно реализовать его.
Что нам делать?
- Измените часть приложения (т. Е. Покажите другой экран)
- Вручную измените адрес, отображаемый в адресной строке нашего браузера.
Маршрутизатор и выход маршрутизатора
Не так давно я разработал с использованием angular, в своей реализации я выбрал терминологию, используемую командой Angular, чтобы иметь компонент под названием Router Outlet, который должен представлять компонент в соответствии с новым URL-адресом приложения. А пока давайте укажем на документ только одну розетку маршрутизатора и получим его с помощью простого querySelector.
get routerOutlet() { return document.querySelector('router-outlet'); }
Мы делаем это, просто устанавливая атрибут на выходном компоненте выходного маршрутизатора и позволяя ему делать все остальное.
Перед этим нам нужно проверить отправляемый нам URL-адрес и выдать исключение, если он недействителен. .
try { url = url === '/' ? url : new URL(url).pathname; } catch (err) { throw Error(`Cannot construct url from ${url}`) } this.routerOutlet.setAttribute('current-url', url);
С другой стороны, у нас должен быть новый URL-адрес, записанный в адресной строке. Для этого мы будем использовать API истории с помощью history.pushState.
history.pushState(null, null, url);
Итак, метод навигации должен выглядеть так:
navigate(url) { try { url = url === '/' ? url : new URL(url).pathname; } catch (err) { throw Error(`Cannot construct url from ${url}`) } history.pushState(null, null, url); this.routerOutlet.setAttribute('current-url', url); }
Далее перейдем непосредственно к роутеру-розетке.