Вы действительно понимаете интерфейсную маршрутизацию?

предисловие: В Интернете есть много статей, знакомящих с реализацией front-end маршрутизации, а также статей о принципах маршрутизации. Но в ходе недавнего интервью я обнаружил, что все опрошенные могут объяснить техническую реализацию маршрутизации, но не понимают применимых сценариев каждой технической реализации. НапримерhashМаршрутизация, ответ многих людейhashМаршрут будет иметь#Номер не красивый, поэтому я использовал егоhistoryмаршрутизация. Даже когда я выходил на собеседование, некоторые интервьюеры так думали (Т_Т). Любое техническое решение создается для решения каких-то конкретных задач.hashа такжеhistoryне исключено.

В настоящее время решения для внешней маршрутизации в основном включают следующее:

• hash: Это может быть шаблон, понятный большинству людей, в основном основанный на принципе опорных точек. Простой в использовании
• browser: готов использоватьhtml5стандартныйhistory apiслушаяpopstateсобытие пришло правильноdomработать. Каждое изменение маршрута вызывает перенаправление
• memory: эта реализация поддерживает стек в памяти для управления историей доступа, что является более сложным. Он больше используется на мобильных терминалах по утрам. Это трудно реализовать, и есть много проблем. Сейчас редко используется.RNИспользование этого шаблона маршрутизации
• static: В основном используетсяssr. Требуется серверная часть для управления маршрутизацией

Проблемы, решаемые интерфейсной маршрутизацией

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

Сравнение различных схем реализации интерфейсной маршрутизации

плюсы и минусы хеш-маршрутизации

• преимущество

  • Простая реализация и хорошая совместимость (совместима дляie8)
  • Большинство интерфейсных фреймворков предоставляютhashреализация маршрутизации
  • Не требуется установка и разработка на стороне сервера
  • Помимо загрузки ресурсов иajaxкроме запроса, никаких других запросов не будет.

• недостаток

  • Для некоторых операций, требующих перенаправления, серверная часть не может получитьhashЧасть контента, полученного на фоне, не может быть полученаurlТипичный пример — данные в публичном аккаунте WeChat.oauthпроверять
  • Сторона сервера не может точно отслеживать информацию о маршрутизации внешнего интерфейса.
  • Требование к функции привязки будет противоречить текущему механизму маршрутизации.

плюсы и минусы браузерной маршрутизации

• преимущество

  • Для процесса перенаправления не теряетсяurlпараметры в . Бэкенд может получить эту часть данных
  • Большинство интерфейсных фреймворков предоставляютbrowserреализация маршрутизации
  • Серверная часть может точно отслеживать информацию о маршрутизации
  • можно использоватьhistory.stateчтобы получить текущийurlСоответствующая информация о состоянии

• недостаток

  • Совместимость не так хорошаhashмаршрутизация (совместима только сIE10)
  • Требуется внутренняя поддержка, возвращается каждый разhtmlДокументация

плюсы и минусы маршрутизации памяти

• преимущество

  • Проблем с совместимостью нет, маршруты хранятся в памяти
  • Не требуется поддержка на стороне сервера

• недостаток

  • В настоящее время несколько интерфейсных модулей маршрутизации обеспечиваютmemoryРеализация маршрута (react-routerпри условииmemoryвыполнить)
  • Самостоятельно реализовать сложно, да и нагрузка очень большая
  • Управление маршрутизацией для прямых и обратных операций очень громоздко, особенноandroidоборудованиеbackbutton

staticМаршрутизация Преимущества и недостатки (этот метод маршрутизации в основном используется дляssr. Не сравнивай. )

Как выбрать подходящее решение для внешней маршрутизации? Следующие предложения приведены для справки:

Применимые сценарии хэш-режима:

• Совместимость с IE8
• Не требуется перенаправление (сторонняя аутентификация)oauth)
• Нет необходимости в прыжке с якоря
• Backenc не нужно отслеживать информацию о маршрутизации Frontend
• hybrid appРесурсы должны быть упакованы во внешние приложения внутри, потому чтоhtmlдомен вfile://, поэтому перенаправление не может произойти

Применимые сценарии режима истории:

• Требования к анкорам на странице
• Необходимо перенаправить параметры
• Изоморфный прямо
• Информация о маршруте
• Дополнительная информация о маршрутизации (history.state), чтобы получить статус маршрутизации

Применимые сценарии режима памяти:

• Совместимость ниже ie8
• React Native