сцена в проекте
Предыдущий проект vue перешел в режим истории.После развертывания в сети было обнаружено, что на странице появляется ошибка 404. После некоторых исследований было обнаружено, что это связано с путем к ресурсу, настроенному nginx, но использование режима хеширования не имело бы Эта проблема. Так что просто запишите разницу и взаимосвязь между этими двумя режимами, чтобы не наступить на яму.
два режима
Объяснение внешнего интерфейса на официальном сайте
Суть front-end маршрутизации заключается в изменении представления без запроса к back-end.
- Режим хеширования заключается в обновлении URL-адреса страницы путем изменения привязки (#) и не приводит к перезагрузке страницы. Мы можем отслеживать изменение хэша через window.onhashchange для обработки маршрута.
- Режим истории предназначен для реализации скачка обновления страницы путем вызова ряда методов объекта window.history.
свои особенности
hash
hash, изначально использовавшийся для управления положением окна страницы в сочетании с точкой привязки, имеет следующие характеристики:
- URL-адрес можно изменить, но это не приведет к перезагрузке страницы (изменения хеша будут записаны в window.hisotry), поэтому это не http-запрос, поэтому этот режим не способствует SEO-оптимизации.
- Вы можете изменить только часть после #, поэтому вы можете перейти только к URL-адресу того же документа, что и текущий URL-адрес.
- URL можно изменить только строкой
- Отслеживайте изменения хэша через window.onhashchange, тем самым реализуя функцию скачка без обновления.
history
Согласно представлению Mozilla Develop Network, вызов history.pushState() имеет следующие преимущества по сравнению с прямым изменением хэша:
- Новый URL может быть любым URL с тем же происхождением, что и текущий URL, или он может быть таким же, как текущий URL, но это записывает повторяющуюся работу в стеке
- В запись можно добавить любой тип данных через параметр stateObject
- Атрибут title можно дополнительно установить для последующего использования
- Функция перехода без обновления реализована через pushState и replaceState.
существует проблема
Это сценарий, упомянутый в начале статьи, когда приложение переходит на страницу через vue-router, потому что в это время перескакивает интерфейсная страница управления маршрутизацией, хотя URL-адрес меняется, страница только меняет содержимое и делает не запрашивать повторно, так что в этом процессе нет ничего плохого. Однако, если вы обновите текущую страницу, запрос будет повторно инициирован в это время.Если nginx не соответствует текущему URL-адресу, появится страница 404.
Так почему же у хеш-режима нет этой проблемы?
Выше говорили, хотя хеш может изменить URL-адрес, но не будет включен в HTTP-запрос. Используется для руководства Действие браузера не влияет на сторону сервера, поэтому для изменения хеша не меняет URL-адрес, поэтому страница или путь до пути NGINX не будут перехвачены.
Итак, помните, при использовании режима истории, позволяя доступ к адресу сервера может получить доступ, в противном случае будет неловкая сцена 404.
Суммировать
- В хеш-режиме все переходы страниц выполняются клиентом, что делает его более гибким для перехвата страниц, но каждое изменение URL-адреса не относится к http-запросу, поэтому это не способствует SEO-оптимизации.
- В режиме истории используйте history.pushState для реализации скачка обновления страницы; этот метод изменяет URL-адрес, если страница обновляется, это вызовет новый HTTP-запрос, поэтому сервер будет повторно запрошен, что также заставляет нас быть на стороне сервера Настроить адрес, иначе сервер вернет 404. Чтобы проблем не было, лучше всего настроить страницу 404 в проекте