Некоторые знания о vue-router

Совет: некоторые знания о vue-router будут постоянно обновляться.

---

Несколько режимов маршрутизации vue-router?

Vue-router имеет 3 режима маршрутизации: хэш, история, абстракция, и соответствующий исходный код выглядит следующим образом:

switch (mode) {
    
    
  case 'history':
    this.history = new HTML5History(this, options.base)
    break
  case 'hash':
    this.history = new HashHistory(this, options.base, this.fallback)
    break
  case 'abstract':
    this.history = new AbstractHistory(this, options.base)
    break
  default:
    if (process.env.NODE_ENV !== 'production') {
    
    
      assert(false, `invalid mode: ${
      
      mode}`)
    }
}

Среди них описания трех режимов маршрутизации следующие:

• hash: Используйте хеш-значение URL-адреса для маршрутизации. Поддержка всех браузеров, включая браузеры, не поддерживающие HTML5 History Api;
• history : зависит от HTML5 History API и конфигурации сервера. Для получения дополнительной информации вы можете просмотреть режим истории HTML5;
• abstract : поддержка всех сред выполнения JavaScript, таких как серверная часть Node.js. Маршрутизаторы автоматически переходят в этот режим, если API браузера не найден.

Является ли принцип реализации режимов маршрутизации хэша и истории широко используемым в vue-router?

(1) Принцип реализации режима хеширования
Ранняя реализация внешней маршрутизации основана на location.hash. Принцип реализации очень прост, значение location.hash — это содержимое после # в URL. Например, следующий веб-сайт имеет значение location.hash '#search':
https://www.word.com#search
Реализация режима маршрутизации хэшей в основном основана на следующих характеристиках:

• Хэш-значение в URL-адресе — это только состояние клиента, то есть, когда на сервер делается запрос, хеш-часть не отправляется;
• Изменение хеш-значения добавит запись в историю доступа браузера. Поэтому мы можем управлять переключением хэшей через кнопки браузера назад и вперед;
• Вы можете передать тег a и установить атрибут href.Когда пользователь нажимает на этот тег, хеш-значение URL-адреса будет меняться, или использовать JavaScript, чтобы присвоить значение loaction.hash, чтобы изменить хеш-значение URL-адреса;
• Мы можем использовать событие hashchange для отслеживания изменений значения хеш-функции, тем самым переходя (отрисовывая) страницу.

---

(2) Принцип реализации режима истории
HTML5 предоставляет History API для реализации изменений URL. Среди них есть два основных API: history.pushState() и history.repalceState(). Эти два API могут манипулировать историей браузера, не обновляя ее.
Единственное отличие состоит в том, что первый добавляет новую запись истории, а второй напрямую заменяет текущую запись истории, как показано ниже: Реализация
window.history.pushState(null, null, path); window.history.replaceState(null, null, path);
режима маршрутизации истории в основном основана на следующих характеристиках:

• PushState и repalceState — два API для работы и реализации изменений URL-адресов;
• Мы можем использовать событие popstate для отслеживания изменения URL-адреса, чтобы перейти (рендерить) страницу;
• history.pushState() или history.replaceState() не будут вызывать событие popstate, тогда нам нужно вручную вызвать переход на страницу (рендеринг).