Не ломай паутину
Перед тем, как начать, я хотел бы сделать следующую цитату в качестве аксиомы, которую нужно принять во внимание на некоторое время.
«Любой веб-сайт должен всегда отображать один и тот же контент для данного URL, независимо от любого предыдущего состояния»
- Кто-то со здравым смыслом
Я могу придумать некоторые исключения, такие как настройки сеанса или браузера, которые могут различать контент между пользователями, но это должно быть верно для каждого отдельного пользователя.
Это важно иметь в виду при создании одностраничных приложений.
Распространенная ошибка, с которой я сталкивался много раз во время разработки, - это когда страница, отображающая представление результатов, предлагает фильтры для настройки поиска. Как только пользователи начинают настраивать эти фильтры, результаты обновляются, но URL-адрес остается прежним, вызывая десинхронизацию состояния URL-адреса, поэтому, если пользователь попытается перезагрузить страницу или поделится URL-адресом, веб-страница не будет отображать отфильтрованные результаты.
Это связано с тем, что разработчик напрямую обновил состояние приложения вместо использования маршрутизатора для синхронизации URL-адреса с ним.
Далее я покажу несколько примеров, написанных с использованием Vue и Vue Router.
Предупреждение: все эти сведения были написаны непосредственно с носителя, я не могу гарантировать, что они работают без ошибок, но я думаю, что они отражают идею
Плохая реализация
Здесь мы можем увидеть, как поля ввода Checkbox и Pagination напрямую обновляют свойства данных, а затем наблюдатели за ними запускают выборку новых результатов без обновления URL-адреса.
Это не правильно.
Хорошая реализация
В этом примере мы используем средства навигации, предоставляемые Vue Router, чтобы подключиться к циклу маршрутизатора, чтобы мы могли получить параметры запроса и синхронизировать с ними наши данные.
Даже мы могли бы пойти дальше и избавиться от свойств данных, чтобы использовать только параметры, предоставленные маршрутом, поэтому нам не нужно ничего синхронизировать, как показано в этой последней сущности.
Таким образом, браузер будет отслеживать любые изменения состояния страницы, и пользователь будет иметь полную функциональность для действий Назад / Вперед и полностью доступный URL-адрес.
