Основные принципы трилогии SPA-маршрутизации

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

Всего за 7 месяцев загрузки двух технологических стеков превысили миллион, а React даже превысил 10 миллионов. Будь то популярные React, Vue или потрясающие Angular, Ember, если это одностраничное веб-приложение, оно неотделимо от взаимодействия с интерфейсной маршрутизацией. Если одностраничное веб-приложение сравнить с комнатой, и каждая страница соответствует каждой комнате в доме, то маршрут - это дверь комнаты.Как бы красиво ни была украшена комната, ее нельзя отображать перед пользователь без двери Статус страницы веб-приложений очевиден.

Чтобы более подробно представить интерфейсную маршрутизацию, редактор шаг за шагом проведет вас к изучению принципа реализации внешней маршрутизации на трех уровнях, от мелкого до глубокого. Во-первых, изучите основные знания о внешней маршрутизации с помощью «Основных принципов трилогии маршрутизации SPA», затем «Практика MyVueRouter по трилогии маршрутизации SPA», которая приведет вас к реализации вашего собственного vue-router, и, наконец, «Трилогия маршрутизации SPA: Практика MyVueRouter «Анализ исходного кода VueRouter» заставит вас глубоко проанализировать исходный код vue-router. «Основные принципы трилогии SPA-маршрутизации» обеспечат предварительное понимание внешней маршрутизации из трех частей: прошлое и настоящее сквозной маршрутизации, анализ основных принципов и сравнение vue-router и react. -приложения роутера.

Внешняя маршрутизация в прошлом и настоящем

Разработка внешней маршрутизации прошла через процесс внутренней маршрутизации, перехода внешней и внутренней маршрутизации и внешней маршрутизации.Если вы все еще плохо понимаете внешнюю маршрутизацию, необходимо понимать процесс его развития.

Внутренняя маршрутизация

Концепция маршрутизации впервые появилась в бэкенде.Когда веб-разработка была еще в эпоху «слэш-энд-прожига», бэкенд-маршрутизация всегда была доминирующей, а рендеринг страницы полностью зависел от сервера.

В самом начале файлы HTML, CSS, JavaScript и файлы и файлы Data Carrier JSON (XML) были помещены в каталог задней стороны сервера, и эти файлы не были связаны друг с другом. Если вы хотите изменить макет сайта, Вы можете изменить сотни HTML, громоздких и без технического содержания. Позже смарт-инженеры организовали тот же HTML в шаблоны и повторно использовали их, что успешно уменьшило рабочую нагрузку передней части. Фронтальные инженеры начали заменять рукописные HTML с языками шаблонов, а файлы в каталоге сервера Back-End также стали различными шаблонными файлами.

В течение этого периода, независимо от того, на какой языковой платформе используется веб-сервер, будет специально разработанный модуль маршрутизации или область маршрутизации для соответствия URL-адресу, указанному пользователем, а также некоторым адресам отправки форм и запросам страниц. Когда пользователь переключает страницы, браузер отправляет разные URL-запросы. Когда сервер получает запрос браузера, он сопоставляет внутренний маршрут, анализируя разные URL-адреса. После объединения шаблона он возвращает его во внешний полный HTML-код. После получения HTML-файла браузер напрямую анализирует и отображает его, что является так называемым рендерингом на стороне сервера.

Сервер отображает страницу, а серверная часть имеет полную HTML-страницу, что облегчает поисковым роботам получение информации, что способствует SEO-оптимизации. Клиенту требуется меньше ресурсов, особенно мобильному терминалу, что позволяет экономить больше энергии.

переход

Веб-приложения, разработанные на основе внутренней маршрутизации, будут иметь недостаток. Каждый раз, когда вы переходите к другому URL-адресу, вы повторно посещаете сервер, сервер объединяется для формирования полного HTML-кода, возвращается в браузер, и браузер отображает страницу. Даже клавиши браузера «вперед» и «назад» будут возвращаться к серверу, не используя должным образом кеш.

По мере того, как интерфейсная страница становится все более сложной и полной, количество файлов кода в каталоге внутреннего сервера будет увеличиваться, и связь будет становиться все более и более серьезной. Это не только увеличивает нагрузку на сервер, но и не способствует хорошему взаимодействию с пользователем и сопровождению кода. Из-за того, что front-end технологии, представленные JavaScript, еще не поднялись, эта болевая точка стала самой большой проблемой для программистов.

До 1998 года команда Microsoft Outloook Web App предлагала базовую концепцию Ajax (предшественника XMLHttpRequest). Я думаю, что все хорошо знакомы с этой технологией. Это техническое решение для браузера, реализующее асинхронную загрузку, и оно реализовано в IE5. через ActiveX.эта технология. Благодаря Ajax при работе со страницей не требуется каждый раз обновлять страницу, и работа с ней значительно улучшилась.

Выпуск Google Map в 2005 году привел к расцвету технологии Ajax, показав людям ее истинное очарование, сделав ее не только ограниченной простыми данными и взаимодействием со страницами, но и заложив основу для процветания и развития асинхронного интерактивного опыта. В 2008 году, с выпуском движка Google V8 и появлением JavaScript, фронтенд-инженеры начали заимствовать идею бэкэнд-шаблонов, и родились одностраничные приложения. В 2009 году Google выпустила Angularjs для продвижения MVVM и одностраничных приложений и искренне восхищается мощью Google.

Одностраничные приложения не только не обновляются при взаимодействии со страницей, но и перескакивают страницы без обновления.Чтобы взаимодействовать с переходами одностраничных приложений, была создана внешняя маршрутизация.

Внешняя маршрутизация

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

Рост внешней маршрутизации изменил рендеринг страницы с рендеринга сервера на рендеринг внешнего интерфейса. Почему ты это сказал! При запросе URL-адреса серверу не нужно сплайсировать шаблон, а нужно только вернуть HTML-код, обычно HTML-код, полученный браузером, выглядит следующим образом:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <link href="app.css" rel="stylesheet"/>
</head>
<body>
  <div id="app"></div>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>

Здесь есть только один пустой

и ряд js-файлов, поэтому этот HTML-код неполный. Страница, которую мы видим, рендерится с помощью этой серии js, то есть внешнего рендеринга. Внешний рендеринг решает построение страницы за счет вычислительной мощности клиента, что значительно снижает нагрузку на сервер.

Одностраничная разработка — это тренд, но его нельзя игнорировать, как и нельзя игнорировать недостатки внешнего рендеринга. Поскольку сервер не сохраняет полный HTML, динамическая склейка DOM через js занимает дополнительное время, что не так быстро, как скорость рендеринга сервера, и не способствует SEO-оптимизации. Поэтому в реальной разработке метод рендеринга не может выбираться вслепую, а должен основываться на бизнес-сценарии. Серверный рендеринг также является правильным выбором для веб-сайтов, важных для SEO, без сложных взаимодействий.

Анализ основного принципа

Маршрутизация описывает отношение сопоставления между URL-адресом и пользовательским интерфейсом. Это сопоставление является односторонним, то есть изменения URL-адреса приводят к обновлению пользовательского интерфейса (без обновления страницы). Существует два основных способа отображения интерфейсной маршрутизации:

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

В vue-router и react-router эти две формы отображения определяются как два режима, а именно режим хеширования и режим истории. Принцип реализации внешней маршрутизации очень прост: он обнаруживает изменения в URL-адресах, перехватывает URL-адреса и реализует обновления пользовательского интерфейса путем анализа и сопоставления правил маршрутизации. Теперь следуйте за редактором, чтобы раскрыть его таинственную завесу!

Hash

Полный URL-адрес включает в себя: протокол, доменное имя, порт, виртуальный каталог, имя файла, параметры, привязку.

Хэш-значение относится к якорной части URL-адреса, то есть к части после #. Хэш, также известный как якорь, используется для позиционирования страницы, а идентификатор DOM, соответствующий значению хеша, отображается в видимой области. До появления новой функции истории в HTML5 внешняя маршрутизация в основном реализовывалась путем прослушивания хеш-значения. Обновление значения хэша имеет следующие характеристики:

• Хэш-значение — это флаг веб-страницы, HTTP-запрос не содержит анкорной части, что не влияет на бэкэнд.
• Поскольку HTTP-запрос не содержит привязку, перезагрузка страницы не запускается при изменении хеш-значения.
• Изменение значения хеша изменяет историю браузера
• Изменение значения хеша вызовет событие window.onhashchange().

Есть 3 способа изменить значение хеша:

• Тег a изменяет значение привязки, например:
• Установив значение window.location.hash
• Клавиша браузера вперед (history.forword()), клавиша возврата (history.back())

Подводя итог, эти три способа изменить значение хеша не заставят браузер отправлять запрос на сервер, и браузер не обновит страницу, если он не отправит запрос. Хэш-значение изменяется, вызывая событие hashchange для глобального объекта окна. Таким образом, маршрутизация в хеш-режиме заключается в использовании события hashchange для отслеживания изменений URL-адресов, чтобы выполнять операции DOM для имитации переходов между страницами.

History

Прежде чем объяснять историю, давайте подумаем над вопросом: почему я могу нажать кнопку «Назад» в верхнем левом углу браузера, чтобы вернуться к предыдущей истории просмотров, и нажать кнопку «Вперед», чтобы вернуться к предыдущей истории просмотров? Это связано с тем, что браузеры имеют стекообразную историю, которая следует правилу «первым пришел — последним вышел». Каждое изменение URL-адреса, включая изменение хеш-значения, будет формировать запись истории в браузере. Объект window обеспечивает доступ к истории браузера через объект history.

• история.длина Из соображений безопасности объект History не позволяет несанкционированному коду получать доступ к URL-адресам с других страниц в истории, но длина объекта истории может быть доступна через history.length .
• история.назад() Вернитесь к предыдущей записи истории, так же, как клавиша возврата в браузере.
• история.вперед() Переход к следующей записи истории, такой же, как клавиша переадресации в браузере.
• история.го(сущ.) Перейти к соответствующей записи доступа; если n > 0, перейти вперед, если n

Для совместной разработки одной страницы HTML5 добавляет в History API два новых метода: pushState() и replaceState(), оба из которых имеют возможность манипулировать историей браузера.

history.pushState(state, title, URL)

pushState получает всего 3 параметра:

• состояние: используется для хранения объекта состояния, соответствующего URL-адресу, который можно получить через history.state.
• title: заголовок, в настоящее время не поддерживается браузерами
• URL-адрес: определите новую историческую запись URL-адреса. Следует отметить, что новый URL-адрес должен иметь то же происхождение, что и текущий URL-адрес, и не может быть междоменным.

Функция pushState добавит запись в историю браузера, значение history.length будет равно +1, а URL-адрес текущего браузера станет новым URL-адресом. Следует отметить, что: просто измените URL-адрес браузера на новый URL-адрес, страница не будет загружена и обновлена. Просто посмотрите на пример:

пройти черезhistory.pushState({ tag: "cart" }, "", "cart.html"),Буду/home.htmlстали/cart.html, изменился только URL,cart.htmlСтраница не загружается, и браузер даже не обнаруживает, что путь существует. Это также доказывает, что pushState изменяет URL-ссылку браузера без обновления страницы, и реализация одностраничной маршрутизации использует эту функцию.

Осторожно детская обувь должна была обнаружить, что метод установки нового URL через pushState такой же, как и передачаwindow.location='#cart'Способ установки хеш-значения для смены URL-адреса аналогичен: URL-адрес изменяется, создается и активируется новая запись истории в текущем документе, но страница не перерисовывается, и браузер не инициирует запрос. Каковы преимущества первого?

• Новым URL-адресом может быть любой URL-адрес того же происхождения, а window.location может оставаться в текущем документе только путем изменения хэш-значения, а браузер не инициирует запрос.
• Новый URL-адрес может быть текущим URL-адресом. Если он не изменится, можно создать новую запись в истории, а для window.location должно быть установлено другое значение хэша, прежде чем его можно будет создать. Если текущий URL-адрес/home.html#foo, при использовании window.location для установки хэша хэш

значение не должно быть#foo, чтобы создать новую историю

• Вы можете добавить любые данные в новый элемент истории через параметр состояния, а изменив метод хеширования через window.location, вы можете только преобразовать соответствующие данные в очень короткую строку и поставить ее после значения хеша в виде запроса
• Хотя параметр title еще не поддерживается всеми браузерами, интерфейс развивается так быстро, что кто может сказать, что будет в будущем!

history.replaceState(state, title, URL)

Использование replaceState очень похоже на pushState, оба изменяют текущий URL без обновления страницы. Разница в том, что replaceState изменяет текущий элемент истории, а не создает новый, а значение history.length остается неизменным.

Из приведенной выше анимации мы можем узнать, чтоhistory.replaceState({ tag: "cart" }, "", "cart.html")Перед изменением URL история истории/classify.html,/home.html, после изменения URL-адреса нажмите кнопку «Назад» в браузере, чтобы вернуться непосредственно к/classify.html, пропущено/home.html. Это также доказывает, что replaceState будет в истории/home.htmlпревратиться в/cart.html, вместо создания нового/cart.html.

window.onpopstate()

Когда страница перескакивает через тег или window.location, будет запущено событие window.onload, и страница будет отображена. Нажатие клавиши браузера «назад» или «вперед» также перезагрузит (Chrome) или сохранит предыдущую страницу (Safari), в зависимости от механизма браузера. Для истории, измененной с помощью history.pushState() или history.replaceState(), нажатие кнопки браузера «Назад» или «Вперед» на странице не отвечает, так как же управлять рендерингом страницы? Чтобы взаимодействовать с history.pushState() или history.replaceState(), HTML5 также добавляет событие для прослушивания изменений истории URL: window.onpopstate().

официальный дляwindow.onpopstate()Описание события таково:

Всякий раз, когда активная запись истории изменяется, событие popstate запускается для соответствующего объекта окна. Если текущая активная запись истории была создана методом history.pushState() или изменена методом history.replaceState(), свойство состояния объекта события popstate содержит копию объекта состояния записи истории. Вызов history.pushState() или history.replaceState() не вызовет событие popstate. Событие popstate будет запускаться только при определенных действиях браузера, таких как нажатие кнопок «назад» и «вперед» (или вызов методов history.back(), history.forward(), history.go() в JavaScript), кроме того, Якоря тега также запускают это событие.

Когда я прочитал этот отрывок в первый раз, я не понял его, но после долгого размышления я также сделал много примеров, и обнаружил, что есть много ям. Эти ямы в основном из-за различные механизмы каждого браузера. Описания window.onpopstate() в официальных документах мало, а непонятных мест много.По собственным тестам разберу описание на официальном сайте.Если что-то не так, надеюсь вы укажете вне.

1. Всякий раз, когда активная запись истории изменяется, событие popstate запускается для соответствующего объекта окна.

Понимание этого предложения заключается в том, что ввод URL-адреса в браузере делает его активным, независимо от того, каким образом, всякий раз, когда URL-адрес изменяется, всплывающее состояние срабатывает. Но фактическая ситуация такова: только URL-адрес, измененный с помощью pushState или replaceState, будет срабатывать при нажатии кнопки возврата в браузере.Если URL-адрес изменен (а не точка привязки) с помощью тега или окна. , не горит. У меня есть два предположения для этой ситуации:

• События popstate являются асинхронными функциями. Поскольку URL-адрес изменяется с помощью тега или window.location, текущая страница выгружается и загружается новая страница. Поскольку событие popstate является асинхронным, оно не успевает загрузиться, пока страница не будет выгружена.
• Событие popstate будет срабатывать только в том случае, если срабатывает новая запись в истории изменений pushState и replaceState.В конце концов, событие popstate взаимодействует с pushState и replaceState.

После изучения большого количества информации эти два предположения не подтвердились, но одно можно сказать наверняка: если вы хотите прослушать событие popstate, вы должны использовать историю изменений pushState и replaceState.

2. Вызов history.pushState() или history.replaceState() не вызовет событие popstate, а событие popstate сработает только при определенном поведении браузера.

Из-за разных механизмов каждого браузера результаты тестов также отличаются. Сначала проведем тест в браузере Chrome:
home.html

<div>
  <h3>home html</h3>
  <div id="btn" class="btn">跳转至 cart.html</div>
  <a href="classify.html"> a 标签跳转至 classify.html</a>
</div>
<script>
  document.getElementById('btn').addEventListener('click', function(){
       history.replaceState({ tag: "cart" }, "", "cart.html")
   }, false); 
   window.addEventListener('popstate', ()=>{
      console.log('popstate home 跳转')
   })
</script>

Делаем так: текущий URL/home.html,пройти черезhistory.pushState({ tag: "cart" }, "", "cart.html")изменил текущий URL на/cart.html. Во время этого процессаhome.htmlСобытие popstate в popstate действительно не срабатывает. В этот момент нажмите кнопку «Назад» в браузере, и URL снова изменится на/home.html,home.htmlСобытие popstate запускается.

Что если мы выпрыгим/home.htmlЧто с документом? пройти черезhistory.pushState({ tag: "cart" }, "", "cart.html")изменил текущий URL на/cart.html, щелкните тег a, чтобы изменить URL-адрес на/classify.html.

На этом этапе нам нужно прояснить: тег a изменяет URL-адрес, браузер повторно инициирует запрос, страница переходит, а также изменяется объект окна. Первое предложение официального документа popstate указывает: событие popstate запускается для соответствующего объекта окна. В этот момент мы нажимаем кнопку возврата браузера, и URL-адрес становится/cart.html,воплощать в жизнь/cart.htmlВ событии load страница загружается. Нажмите кнопку «Назад» в браузере еще раз, и URL-адрес изменится на/home.html,/cart.htmlСобытие popstate срабатывает, и страница не отображается.

Хотя событие popstate запускается, оноcart.htmlСобытие popstate, определенное на странице, неhome.htmlмероприятие. И та же работа кнопки «Назад» в браузере, отображение в браузере Safari выглядит так:

При откате браузера Safari и Chrome загружают страницы по-разному.classify.htmlвернуться кcart.html, URL становится/cart.html, но вызываетhome.htmlСобытие popstate в , продолжает отступать, и URL-адрес становится/home.html, все еще вызываетhome.htmlв событии popstate.

Разница между браузером Chrome и браузером Safari связана с обработкой браузером события popstate. Что касается внутренней обработки браузера, то редактор толком не изучен. Хотя браузеры Chrome и Safari по-разному обрабатывают события popstate, резервный путь URL-адреса один и тот же, что полностью соответствует правилу истории.

В реальной разработке такая ситуация тоже существует: URL определяется/home.htmlприбыть/cart.htmlЭто изменение похоже на скачок в одностраничной разработке. если в это времяcart.html, вам нужно использовать pushState, чтобы выйти из одной страницы и войти на страницу входа. Пользователь щелкает браузер, чтобы вернуться на страницу входа, или жест мобильного терминала, чтобы вернуться. Возникает описанная выше ситуация, когда браузер Chrome и браузер Safari отображают страницы несогласованно.

Описание на официальном сайте popstate гласит: «Событие popstate будетсоответствующий объекту окнана триггере", обратите внимание, чтосоответствующий объекту окна, концепция довольно расплывчата, ссылаясь на объект окна, который запускает pushState, или на вновь определенный объект окна pushState. Согласно нашему тесту выше, можно вызвать событие popstate. Итак, детская обувь, столкнувшись с описанной выше ситуацией, не забудьте выполнить мониторинг состояния всплывающих окон на двух связанных страницах.

3. Точка привязки метки также может запускать метод события popstate.

В отличие от pushState и replaceState, изменение привязки тега немедленно вызывает событие popstate. Здесь мы расширяем идею: что делает тег a, так это изменяет хеш-значение, а затем может ли изменение хэш-значения через window.location также немедленно вызвать popstate. Ответ — да, и popstate также срабатывает немедленно.

Благодаря пониманию раздела хэша изменение значения хеш-функции вызовет событие изменения хеш-функции, поэтому изменение значения хэш-функции одновременно вызовет событие popstate и событие хеш-изменения, но если измененное значение хэша является совпадает с текущим значением хэша, событие hashchange не сработает, и событие popstate не сработает. Мы сказали раньше,window.locationУстановленное хеш-значение должно отличаться от текущего хеш-значения, чтобы создать новую запись в истории, но pushState может.

В сочетании с вышеизложенным, если браузер поддерживает pushState, маршрутизация в режиме хеширования также может быть реализована с использованием pushState, replaceState и popstate. pushstate изменяет значение хеш-функции и совершает скачки, а popstate отслеживает изменение значения хэш-функции. Небольшой спойлер, будь то режим хеширования или режим истории в vue-router, пока браузер поддерживает новые возможности истории, новые возможности истории используются для перехода.

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

На самом деле история и хеш — это собственные функции браузера, а одностраничная маршрутизация просто использует эти функции. Не выпрыгивая из текущего документа, между браузерами не будет никаких различий, кроме совместимости самой истории, а одностраничная разработка заключается в том, чтобы завершить все взаимодействия в одном документе. его на новый уровень.

vue-router и react-router — самые популярные инструменты управления состоянием маршрутизации. Хотя принципы их реализации одинаковы, из-за разных технологических стеков, на которые они опираются, методы использования также немного различаются. При разработке стека технологий react большинство детской обуви по-прежнему любят использовать react-router-dom, который основан на react-router и добавляет некоторые функции в операционную среду браузера.

Инъекционный метод

1. vue-router

vue-router можно использовать глобально в проектах vue,vue.use()Несомненно. пройти черезvue.use(), внедряет экземпляр Vue, который является корневым компонентом, в объект VueRouter. Корневой компонент передает экземпляр VueRouter вниз слой за слоем, позволяя каждому отображаемому дочернему компоненту иметь функции маршрутизации.

import VueRouter from 'vue-router'
const routes = [
    { path: '/',name: 'home',component: Home,meta:{title:'首页'} }
]
const router = new myRouter({
    mode:'history',
    routes
})
Vue.use(VueRouter)

2. react-router-dom

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

import { BrowserRouter as Router, Route } from 'react-router-dom';
class App extends Component {
    render() {
        return (
            <Router>
                <Route path='/' exact component={ Home }></Route>
            </Router>
        )
    }
}

основные компоненты

1. Компоненты, предоставляемые vue-router, в основном включают и

• может напрямую управлять DOM, определять, по какому пути переходить после нажатия; соответствующее содержимое компонента отображается в .

2. Обычно используются React-router-dom: , , , ,

• Компоненты и известны своими именами, которые используются для различения режимов маршрутизации и обеспечения возможности перехода по страницам в проекте React.

• Компонент аналогичен компоненту в vue-router.Он определяет целевой путь навигации после нажатия, а соответствующее содержимое компонента отображается через .

• используется для преобразования react-router из инклюзивной маршрутизации в эксклюзивную. Пока совпадение успешно, оно не будет продолжаться. vue-router — это эксклюзивный маршрут.

режим маршрутизации

1. vue-router в основном делится на два режима: хэш и история. В новом VueRouter() это реализовано путем настройки режима опции маршрутизации.

• Режим хеширования: # в адресной строке URL. vue-router сначала определяет, поддерживает ли браузер pushState. Если да, измените значение хэша с помощью pushState, выполните сопоставление целевого маршрута, отрисуйте компоненты, прослушайте операции браузера с помощью popstate и выполните функцию навигации. Если нет, используйте location.hash чтобы установить хэш-значение. , hashchange прослушивает изменения URL-адреса, чтобы завершить навигацию по маршруту.

• Режим истории: в URL-адресе адресной строки нет #. Идея реализации навигации такая же, как и у режима Hash. Разница в том, что vue-router предоставляет резервную конфигурацию, которая определяет, должен ли маршрут возвращаться в режим хеширования, когда браузер не поддерживает history.pushState. Значение по умолчанию верно.

  Принципиальный анализ режима хеш-маршрутизации на основе онлайн-информации в основном реализуется с помощью location.hash в сочетании с хэш-изменением, что отличается от реализации режима хэш-маршрутизации, описанного выше.Это также то, что Xiaobian недавно обнаружил, прочитав исходный код vue-router. , вы обязательно будете вознаграждены!

2. Двумя широко используемыми режимами react-router-dom являются browserHistory и hashHistory, которые могут быть достигнуты путем непосредственной обертки корневого компонента (обычно ) с помощью или .

• Реализация react-router основана на history.js, библиотеке JavaScript. и реализованы на основе классов BrowserHistory и HashHistory из history.js соответственно.

• Класс BrowserHistory реализуется через pushState, replaceState и popstate, но нет обработки, совместимой с vue-router. Класс HashHistory реализуется непосредственно через location.hash, location.replace и hashchange без приоритета обработки новой функции истории.

Вложенная маршрутизация и подмаршрутизация

1. Вложенная маршрутизация vue-router

При настройке таблицы маршрутизации в new VueRouter() вложенная маршрутизация реализуется путем определения дочерних элементов.Независимо от того, какой уровень компонентов маршрутизации, они будут отображаться в месте, указанном родительским компонентом .

router.js

const router = new Router({
    mode:'history',
    routes: [{
        path: '/nest',
        name: 'nest',
        component: Nest,
        children:[{
            path:'first',
            name:'first',
            component:NestFirst
        }]
    }]
})

nest.vue

<div class="nest">
    一级路由 <router-view></router-view>
</div>

first.vue

<div class="nest">
    二级路由 <router-view></router-view>
</div>

существует/nestМаршрутизация второго уровня устанавливается в/firstСоответствующий компонент второго уровня отображает идентификатор компонента в маршрутизации первого этапа. Когда подмаршрут настроен, PATH должен быть только текущим путем.

2. субмаршрутизатор реакции-маршрутизатора

Корневой компонент react-router будет отображаться в месте, указанном , а дочерний маршрут будет использоваться как дочерний компонент, а родительский компонент указывает местоположение рендеринга объекта. Если вы хотите добиться описанного выше вложенного эффекта vue-router, вам нужно установить его следующим образом:

route.js

const Route = () => (
    <HashRouter>
        <Switch>
            <Route path="/nest" component={Nest}/>
        </Switch>
    </HashRouter>
);

nest.js

export default class Nest extends Component {
    render() {
        return (
            <div className="nest">
                一级路由
                <Switch>
                    <Route path="/nest/first" component={NestFirst}/>
                </Switch>
            </div>
        )
    }
}

first.js

export default class NestFirst extends Component {
    render() {
        return (
            <div className="nest">
                二级路由
                <Switch>
                    <Route exact path="/nest/first/second" component={NestSecond}/>
                </Switch>
            </div>
        )
    }
}

в,/nestдля маршрутизации первого уровня,/fitstКомпонент, соответствующий маршруту второго уровня, используется как подкомпонент маршрута первого уровня. Когда react-router определяет путь дочернего маршрута, ему нужно написать полный путь, то есть путь родительского маршрута должен быть полным.

охранник маршрута

1. Средства защиты навигации vue-router делятся на три типа: глобальные средства защиты, средства защиты маршрута и средства защиты внутри компонентов. В основном используется для защиты навигации путем прыжка или отмены.

а. Глобальная гвардия

• beforeEach — глобальный предварительный хук (срабатывает перед каждым вызовом маршрута, в зависимости от отправителя и до, чтобы определить, какой маршрут срабатывает)
• beforeResolve — глобальный хук разрешения (похож на router.beforeEach, разница в том, что охранники разрешения вызываются до подтверждения навигации и после того, как будут разрешены все охранники внутри компонентов и компоненты асинхронной маршрутизации)
• afterEach — глобальный почтовый хук

B. Эксклюзивная защита маршрутизации

• Защита beforeEnter может быть определена непосредственно в конфигурации маршрутизации.

c. Защитные ограждения компонентов

• beforeRouteEnter — вызывается перед подтверждением соответствующего маршрута, отрисовывающего компонент, не может получить экземпляр компонентаthis, так как экземпляр компонента не был создан до выполнения защиты.
• beforeRouteUpdate — текущий маршрут изменился, но вызывается при повторном использовании компонента
• beforeRouteLeave — вызывается при переходе от соответствующего маршрута компонента.

2. До версии 4.0 react-router хуки onEnter и onLeave предоставлялись для реализации функций, аналогичных навигационной защите vue-router, но после версии 4.0 этот метод был отменен.

информация о маршрутизации

1. В vue-маршрутизаторе$роутер,$объект маршрута

vue-router внедряет каждый экземпляр vue, когда он зарегистрирован$роутер,$маршрутный объект.$router — это информация об экземпляре маршрутизатора, использующая методы push и replace для перехода к маршрутизации,$route предоставляет текущую информацию об активной маршрутизации.

import router from './router'
export default new Vue({
    el: '#app',
    router,
    render: h => h(App),
})

2. История и расположение объектов в react-router

История, объекты местоположения предоставляются в каждом компоненте, обернутом . использоватьthis.props.historyМетоды push и replace реализуют маршрутную навигацию,this.props.locationПолучить текущую активную информацию о маршрутизации.

const BasicRoute = () => (
    <div>
        <HeaderNav></HeaderNav>
        <HashRouter>
            <Switch>
                <Route exact path="/" component={Home}/>
            </Switch>
        </HashRouter>
    </div>
);

Если вы хотите получить историю и местоположение, это должен быть компонент, обернутый . Таким образом, эти два объекта не могут быть получены в , но компонент может.

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

Суммировать

Предварительный опыт front-end роутинга подходит к концу.Прежде чем я решу углублённо изучить front-end роутинг,редактор преисполнен уверенности и чувствует,что это не должно занять много сил и времени,но факт в том, что появляется все больше и больше слепых пятен в знаниях, уверенность постепенно распадается. К счастью, концовка хорошая, и я многого добился.Я также надеюсь, что статья «Основные принципы трилогии SPA-маршрутизации» может помочь каждому получить что-то, даже если это просто очко знаний.

Редактор спешит подготовиться к «Практике MyVueRouter в трилогии SPA-маршрутизации» и «Трилогии спа-маршрутизации: анализ исходного кода VueRouter». Я верю, что не подведу вас, ждите с нетерпением!

PS: Некоторые статьи являются личным мнением.Если они неверны, пожалуйста, обменяйтесь и поправьте меня!