Разница между двумя режимами vue-router

задняя часть внешний интерфейс браузер vue-router

Зачем хэш и история

Для прогрессивных интерфейсных сред разработки, таких как Vue, для созданияSPA (одностраничное приложение), необходимо внедрить фронтальную систему маршрутизации, в чем смысл существования Vue-Router. Ядро внешней маршрутизации лежит в——Изменить вид без запроса к бэкенду.

Для этого браузеры в настоящее время обеспечивают следующие два типа поддержки:

  1. hash-- т.е. в адресной строке URL#символ (этот хэш не является хеш-операцией в криптографии).
    Например, этот URL:http://www.abc.com/#/hello, хэш-значение#/hello. Его характеристики заключаются в том, что хотя хэш появляется в URL-адресе, он не будет включен в HTTP-запрос и вообще не повлияет на серверную часть, поэтому изменение хеша не приведет к перезагрузке страницы.
  2. history- Воспользуйтесь преимуществами нового интерфейса истории HTML5.pushState()иreplaceState()метод. (Требуется поддержка определенного браузера)
    Эти два метода применяются к стеку истории браузера в существующем в настоящее времяback,forward,goКроме того, они предоставляют возможность изменять историю. Просто когда они выполняют модификацию, хотя текущий URL-адрес меняется, браузер не сразу отправляет запрос на серверную часть.

Следовательно, можно сказать, что и режим хеширования, и режим истории относятся к характеристикам самого браузера, и Vue-Router использует только эти две характеристики (вызывая интерфейс, предоставляемый браузером) для реализации внешней маршрутизации.

сцены, которые будут использоваться

В общих сценариях можно использовать как хеш, так и историю, если вас больше не волнует внешний вид,#Символы в URL выглядят некрасиво.

Если вам не нужны уродливые хэши, мы можем использовать режим истории маршрута, который полностью использует API history.pushState для завершения.
URL скачет без перезагрузки страницы. ——Официальный сайт Vue-маршрутизатора.

Кроме того, согласноMozilla Develop Networkзнакомство, звонокhistory.pushState()по сравнению с прямой модификациейhash, имеются следующие преимущества:

  • pushState()Новый набор URL-адресов может быть любым URL-адресом того же происхождения, что и текущий URL-адрес; иhashтолько модифицируемый#Последняя часть, поэтому можно установить только URL-адрес того же документа, что и текущий URL-адрес;
  • pushState()Новый набор URL-адресов может точно совпадать с текущим URL-адресом, что также добавит запись в стек; иhashНовый набор значений должен отличаться от исходного, чтобы инициировать действие по добавлению записи в стек;
  • pushState()пройти черезstateObjectПараметры могут добавлять в запись данные любого типа;hashМожно добавлять только короткие строки;
  • pushState()Доступны дополнительные настройкиtitleСвойства для последующего использования.

конечно,historyНе все хороши. Хотя SPA хорошо работает в браузерах, разница между ними возникает, когда вы действительно хотите инициировать HTTP-запросы к серверной части через URL-адреса. Особенно, когда пользователь вручную вводит URL-адрес, а затем нажимает Enter или обновляет (перезапускает) браузер.

  1. hashрежим, толькоhashСодержимое перед символом будет включено в запрос, напримерhttp://www.abc.com, так что для бэкенда, даже если маршрут не полностью пройден, ошибка 404 возвращаться не будет.
  2. historyВ режиме внешний URL-адрес должен совпадать с URL-адресом, который фактически инициирует запрос к серверной части, напримерhttp://www.abc.com/book/id. Если в бэкенде отсутствует пара/book/idОбработка маршрута вернет ошибку 404.Официальный сайт Vue-RouterЭто описывается как:«Однако, чтобы хорошо играть в этом режиме, ему также нужна поддержка фоновой конфигурации... Итак, вам нужно добавить ресурс-кандидат на сервер, который покрывает все ситуации: если URL-адрес не соответствует ни одному из статических ресурсов, он должен возвращать тот же index.html, эта страница является страницей, от которой зависит ваше приложение».

резюме

В сочетании с собственным примером, для общегоVue + Vue-Router + Webpack + XXXСоздавайте сценарии веб-разработки с помощьюhistoryРежима достаточно, просто выполните простую настройку маршрутизации на серверной части (Apache или Nginx) и поддержите страницу 404 с внешней маршрутизацией.

Перепечатано: https://segmentfault.com/q/1010000010340823


Категории