Подробный внешний режим маршрутизации (хэш и история)

JavaScript

Существует два режима для интерфейсного маршрута: режим HASH и режима истории. Далее мы анализируем методы реализации, преимущества и недостатки этих двух режимов.

Чтобы облегчить демонстрацию, light-server должен быть установлен глобально: пряжа глобальная добавить световой сервер

хэш-режим

Режим хеширования — это способ использования знака решетки для пути к интерфейсной маршрутизации.#Шаблон вставлен после реального URL. когда хэштег#При изменении следующего пути браузер не будет повторно инициировать запрос, а запуститhashchangeмероприятие.

Пример:

мы создаем новыйhash.htmlфайл, содержание:

<a href="#/a">A页面</a>
<a href="#/b">B页面</a>
<div id="app"></div>
<script>
  function render() {
    app.innerHTML = window.location.hash
  }
  window.addEventListener('hashchange', render)
  render()
</script>

Запустите в каталоге:

light-server -s .  --port 3000

затем откройтеhttp://localhost:3000/hash.htmlПроверьте эффект.

В приведенном выше примере мы используемaЯрлык настраивает два маршрута навигации, поставитьappКак контейнер рендеринга представления, он запускает обновление контейнера представления при переключении маршрутов, что на самом деле является принципом реализации хеш-маршрутизации в большинстве интерфейсных фреймворков.

Суммируйте преимущества и недостатки режима хеширования:

  • преимущество: Совместимость с браузерами хорошая, поддерживается даже IE8
  • недостаток: Путь находится в знаке фунта#Сзади некрасиво

режим истории

History API — это новая функция, предоставляемая H5, которая позволяет разработчикам напрямую изменять интерфейсную маршрутизацию, то есть обновлять URL-адрес браузера без повторной инициации запроса.

Пример:

мы создаем новыйhistory.html, содержание такое:

<a href="javascript:toA();">A页面</a>
<a href="javascript:toB();">B页面</a>
<div id="app"></div>
<script>
  function render() {
    app.innerHTML = window.location.pathname
  }
  function toA() {
    history.pushState({}, null, '/a')
    render()
  }
  function toB() {
    history.pushState({}, null, '/b')
    render()
  }
  window.addEventListener('popstate', render)
</script>

Запустите в каталоге:

light-server -s . --historyindex '/history.html' --port 3000

затем откройтеhttp://localhost:3000/history.htmlПроверьте эффект.

History API предоставляет множество функций для вызова разработчиками Мы могли бы также открыть консоль и ввести следующую инструкцию, чтобы наблюдать за изменениями в адресной строке браузера:

history.replaceState({}, null, '/b') // 替换路由
history.pushState({}, null, '/a') // 路由压栈
history.back() // 返回
history.forward() // 前进
history.go(-2) // 后退2次

Приведенный выше код слушаетpopstateсобытие, которое можно слушать:

  • Пользователь нажимает действия браузера вперед и назад.
  • История звонков вручнуюback,forwardа такжеgoметод

Не могу отслеживать:

  • историяpushStateа такжеreplaceStateметод

Вот почему вышеизложенноеtoAа такжеtoBФункцию нужно вызывать вручнуюrenderпричина метода. Кроме того, вы также можете заметитьlight-serverбольше команд--historyindex '/history.html'Параметры, для чего это?

Когда браузер обновится, он отправит реальный запрос ресурса в соответствии с путем. Если путь является URL-адресом, установленным внешним интерфейсом через API истории, ресурс часто не существует на стороне сервера, поэтому возвращается 404. Приведенные выше параметры означают, что если бэкенд-ресурс не существует, он вернетhistory.htmlСодержание.

Поэтому при деплое одностраничного приложения на базе history API онлайн оно должно поддерживаться бэкендом, иначе появится большое количество 404. Взяв в качестве примера наиболее часто используемый Nginx, вам нужно всего лишь настроитьlocation /Добавьте следующую строку в:

try_files $uri /index.html;

Суммируйте преимущества и недостатки режима истории:

  • преимущество: Путь относительно нормальный, без знака решетки#
  • недостаток: Совместимость не так хороша, как хэш, и ему нужна поддержка сервера, иначе он получит 404, как только страница обновится.
Категории