После того, как нам удалось изменить поведение нашего якорного элемента и заставить его вызывать нашу собственную реализацию, пришло время действительно реализовать его.

Что нам делать?

  1. Измените часть приложения (т. Е. Покажите другой экран)
  2. Вручную измените адрес, отображаемый в адресной строке нашего браузера.

Маршрутизатор и выход маршрутизатора

Не так давно я разработал с использованием 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);
}

Далее перейдем непосредственно к роутеру-розетке.