Это восьмой день моего участия в августовском испытании обновлений. Узнайте подробности мероприятия: Испытание августовского обновления

🎹 Предисловие

Как мы все знаем,hashа такжеhistoryЭто очень распространенный вопрос на фронтенд-интервью. Прежде чем изучить содержание этой статьи, в понедельникhashа такжеhistoryосознание может заключаться вhashизurlЕсть еще кое-что#,а такжеhistoryне будет. Затем в моем познании есть еще один, который толькоhistoryотделить передний и задний концы иhashЭто не имеет ничего общего с разделением на перед и зад. Однако реальность такова...

吓到跌倒

Для внешней маршрутизацииhashа такжеhistoryОба могут использоваться для проектов разделения фронтенда и бэкенда, и оба имеют свои особенности и свои сценарии использования.В процессе использования в основном необходимо понять сценарий текущего проекта, чтобы лучше судить какой режим маршрутизации лучше использовать. Введите объяснение этой статьи ниже~😜

🎸 Во-первых, принцип front-end маршрутизации

1. СПА

SPA,Прямо сейчасодностраничное приложение(Одностраничное приложение). одна страницаWebприложение есть только одноWebстраничное приложение. Одностраничное приложение (SPA) — этоHTMLстраница и вКогда пользователь взаимодействует с приложениемДинамически обновлять страницуWebзаявление. Браузер изначально загружает необходимыеHTML,CSSа такжеJavaScript, все операции выполняются на этой странице,JavaScriptконтролировать.

В настоящее время, чтобы соответствовать одной страницеWebРитм быстрого развития приложений, различныхПередний компонентный технологический стекЕсть бесконечные. В последние годы, благодаря непрерывным итерациям версий,vueа такжеreactЭти два технологических стека выделяются и становятся двумя самыми популярными технологическими стеками сегодня.

2. Когда вам нужна маршрутизация

Чуть сложнее для современных разработанных проектовSPA, нужно использоватьмаршрутизация. а такжеvue-routerточноvueМаршрутизация стандартная иvue-routerимеютдва режима:hashа такжеhistory.

Ниже приводится объяснение этих двух режимов.

🎷2. Режим хеширования

1. Определение

hashШаблон — это способ использования знака решетки для маршрутизации пути переднего конца.#сращивание в реалеurlузор сзади. когда хэштег#При изменении следующего пути браузер не будет повторно инициировать запрос, а запуститonhashchangeмероприятие.

2. Компоненты URL веб-страницы

(1) Понимание свойств нескольких URL-адресов

Атрибуты	имея в виду
location.protocal	протокол
location.hostname	Имя процессора
location.host	хозяин
location.port	Номер порта
location.patchname	посетить страницу
location.search	Поиск контента
location.hash	хэш-значение

(2) Демонстрация

В следующем URL-адрес используется для демонстрации вышеуказанных свойств:

//http://127.0.0.1:8001/01-hash.html?a=100&b=20#/aaa/bbb
location.protocal // 'http:'
localtion.hostname // '127.0.0.1'
location.host // '127.0.0.1:8001'
location.port //8001
location.pathname //'01-hash.html'
location.serach // '?a=100&b=20'
location.hash // '#/aaa/bbb'

3. Особенности хеша

Изменения хэша вызовут скачки веб-страницы, то есть браузер вперед и назад.
hashможно изменитьurl, но не вызывает перезагрузку страницы (изменения хеша регистрируются вwindow.history), то есть страница не будет обновляться. Другими словами, все переходы на страницы выполняются на стороне клиента. Так что это не разоваяhttpзапроса, поэтому этот режим не способствуетSEOоптимизация.hashможно только изменить#более поздняя часть, так что вы можете перейти только кurlтот же документurl.
hashпройти черезwindow.onhashchangeспособ контролироватьhashизменения, тем самым реализуя функцию перехода без обновления.
hashникогда не совершатьserverконец (можно понимать только как передний конец по собственному желанию).

🎺3. Режим истории

1. Определение

history APIдаH5предоставляет новые функции, которые позволяют разработчикамИзмените внешний маршрут напрямую, то есть обновить браузерURLадрес иНе повторять запрос.

2. Отличие от хеша

Продемонстрируем на примере,hashа такжеhistoryРазница при обновлении под браузером.детали следующим образом:

нормальный просмотр страниц

https://github.com/xxx 刷新页面

https://github.com/xxx/yyy 刷新页面

https://github.com/xxx/yyy/zzz 刷新页面

Преобразование режима истории H5

https://github.com/xxx 刷新页面

https://github.com/xxx/yyy 前端跳转，不刷新页面

https://github.com/xxx/yyy/zzz 前端跳转，不刷新页面

3. API истории

Далее описывается несколькоHTML5добавленhistory API.Конкретная таблица выглядит следующим образом:

API	определение
history.pushState(data, title [, url])	pushState в основном используется дляДобавить запись в начало стека истории. Параметры анализируются следующим образом:①данныеОн будет передан в качестве параметра при запуске события onpopstate;②название— заголовок страницы, этот параметр игнорируется всеми текущими браузерами; ③urlадрес страницы, необязательный, если он отсутствует, это будет текущий адрес страницы
history.replaceState(data, title [, url])	Измените текущую историю, параметры такие же, как указано выше; pushState выше должен добавить, это изменение
history.state	Данные данных для хранения вышеуказанных методов, разные браузеры имеют разные разрешения на чтение и запись.
window.onpopstate	В ответ на вызов pushState или replaceState

4. Особенности истории

дляhistoryОсновные особенности заключаются в следующем:

новыйurlможет быть таким же, как текущийurlгомологичный произвольныйurl, Это также может быть токurlТот же адрес, но проблема, которую это вызовет, заключается в том, что онповторить эту операциюзапись в стек.
пройти черезhistory.state, чтобы добавить любой тип данных в запись.
можно дополнительно установитьtitleсвойства для последующего использования.
пройти черезpushState,replaceStateДля достижения функции перехода без обновления.

5. Есть проблемы

дляhistoryну это многое решаетhashсуществующие проблемы, но и принесли новые.детали следующим образом:

использоватьhistoryВ режиме при обновлении текущей страницы браузер повторно инициирует запрос. еслиnginxнет совпадения, чтобы получить текущийurl, он появится404страница.
И дляhashрежим, хотя он, кажется, изменилсяurl, но не будет включен вhttpзапрос. Поэтому он используется для управления действиями браузера и не влияет на серверную часть. Поэтому изменитеhashна самом деле не меняетсяurl, поэтому путь к странице остается прежним,nginxОн не будет заблокирован.
Поэтому, используяhistoryрежим, требуетсяРазрешить доступ к адресу через сервер, если он не установлен, легко вызвать404ситуация.

6, оба варианта

Теперь давайте представим, как выбирать между ними в реальном проекте.детали следующим образом:

to Bсистема рекомендуется дляhash, относительно прост и удобен в использовании, а потомуhashправильноurlнормочувствительный;
to Cсистемы, вы можете рассмотреть выборH5 history, но требуетподдержка на стороне сервера;
Если вы можете сначала использовать простое, не используйте сложное.Учитывайте затраты и выгоды.

🎻Четыре.Вывод

дляhashа такжеhistoryГоворя об этом, необходимо знать разницу между ними и их соответствующими сценариями использования, а также их соответствующие характеристики использования, преимущества и недостатки. Вышеупомянутая статья — это просто краткое введение в принцип внешней маршрутизации, надеюсь, она вам поможет~

В третьей пасхалке ниже есть статья о реализацииvue-router, те, у кого есть лишние способности к обучению, должны подобрать их сами!

🐣Пасхальное яйцо Еще одна вещь

🏷️ Ссылки

Джарвис👉В маршрутизации проекта SPA обратите внимание на разницу между хэшем и историей

официальная документация vue-router 👉Два режима vue-router

Стоит посмотреть 👉От использования до самостоятельной реализации простого Vue Router — просто взгляните на это

🏷️Дополнительно

Обратите внимание на публичный аккаунтЛаборатория понедельника, впервые обратите внимание на качественные статьи,Другие рекомендуемые столбцы ждут вас, чтобы разблокировать~

Если эта статья будет вам полезна, помнитеоставить след джиоиди снова~

Это все для этой статьи! Увидимся в следующий раз! 👋👋👋