Одностраничная маршрутизация приложений

Question

Современные одностраничные приложения используют механизмы маршрутизации, которые не должны полагаться на фрагменты или дополнительные параметры URL, а просто используют путь URL.Как браузер узнает, когда запрашивать у сервера ресурс, а когда запрашивать одностраничное приложение для spa-страницы, управляемой маршрутизатором?Существует ли API-интерфейс браузера, позволяющий взять на себя управление передачей URL-адресов, который затем переходит, например, в vue-router или другую библиотеку spa-маршрутизации?

Answer 1

В Vue Router (и я предполагаю, что другие библиотеки / фреймворки такие же) это достигается с помощью HTML5 history API ( pushState () , replaceState () и popstate ), который позволяет вам манипулировать историей браузера, но не заставляет браузер перезагружать страницу или искать ресурс, поддерживая синхронизацию пользовательского интерфейса с URL.

Например, соблюдайтечто происходит с адресной строкой, когда вы вводите эту команду в консоли вашего браузера

history.pushState({urlPath:'/some/page/on/stackoverflow'},"",'/some/page/on/stackoverflow')

Новый URL-адрес даже добавляется в историю браузера, так что если вы отойдете от страницы и придетев ответ вы будете перенаправлены на новый URL.

Конечно, все эти URL не существуют на сервере.Поэтому, чтобы избежать проблемы с ошибками 404, когда пользователь пытается получить прямой доступ к несуществующему ресурсу, необходимо добавить запасной маршрут, который перенаправляет на страницу index.html, на которой находится ваше приложение.

Режим истории HTML5 Vue Router

React Router's