Как разработчик, навигация по приложениям всегда казалась единственным отличием между одностраничным приложением и некоторым интеллектуальным экраном, который может выполнять некоторые запросы к серверу. Поэтому я всегда считал маршрутизацию частью каждой библиотеки / фреймворка своего рода волшебством, без которого я не мог бы обойтись.
Однако всегда в глубине души я чувствовал, что это то, что я действительно мог бы сделать сам, и, поскольку я не настолько умен, я чувствую, что это может сделать каждый разработчик.
В небольшом видео ниже (извините за чистый графический дизайн и подборку изображений) вы можете увидеть запись экрана приложения, заменяющую изображения на их количество, указанное в URL-адресе, а его код, который я демонстрирую, написан на чистом javascript.
Что мы должны сделать для этого?
При разработке маршрутизатора нам необходимо изменить два поведения.
1. Измените поведение элемента привязки.
2. Измените поведение браузера при изменении истории.
Вместо двух описанных выше действий по умолчанию реализуйте свой механизм маршрутизации.
Как изменить поведение якорных элементов?
Легко, просто добавьте событие onclick и предотвратите его поведение по умолчанию.
this.onclick = evt => {
evt.preventDefault();
// do your magic
};
Хорошо, а что мне делать с браузером?
То же самое, зафиксируйте его событие popstate в истории
window.onpopstate = (e) => {
// do your magic
};
А как насчет магии?
