Принцип реализации маршрутизации внешнего интерфейса одностраничного приложения (spa) vue

Go внешний интерфейс браузер Vue.js

Написано впереди: Обычно существует два способа реализации внешней маршрутизации в SPA:

  • window.history
  • location.hash

Ниже описано, как эти два метода реализованы.

1.история

1. Базовое введение в историю

Объект window.history содержит историю браузера, а объект window.history может быть записан без префикса окна. История — это основной метод реализации внешней маршрутизации SPA, который включает в себя несколько оригинальных методов:

  • history.back() — то же самое, что и нажатие кнопки «Назад» в браузере.
  • history.forward() — то же самое, что и нажатие кнопки «вперед» в браузере.
  • history.go(n) - принимает целое число в качестве параметра и переходит на страницу, указанную целым числом.Например, go(1) эквивалентно forward(), go(-1) эквивалентно back(), и go(0) эквивалентно обновлению текущей страницы
  • Если перемещенная позиция превышает границу истории доступа, три вышеуказанных метода не сообщают об ошибке, а молча терпят неудачу.

В HTML5 объект истории предлагает метод pushState() и метод replaceState(). Эти два метода можно использовать для добавления данных в стек истории, как если бы URL-адрес изменился (в прошлом изменялся только стек истории). при изменении URL-адреса), так что вы можете имитировать историю просмотров и вперед и назад. Текущая внешняя маршрутизация также основана на этом принципе.

2.history.pushState

Метод pushState(stateObj, title, url) записывает данные в стек истории, первый параметр — записываемый объект данных (не больше 640kB), второй параметр — заголовок страницы, третий параметр — URL-адрес (относительный путь).

  • stateObj : объект состояния, связанный с указанным URL-адресом. Когда срабатывает событие popstate, объект будет передан функции обратного вызова. Если вам не нужен этот объект, вы можете указать здесь null.
  • title: заголовок новой страницы, но в настоящее время все браузеры игнорируют это значение, поэтому здесь можно указать null.
  • URL-адрес: новый URL-адрес, который должен находиться в том же домене, что и текущая страница. Адресная строка вашего браузера отобразит этот URL.

Есть несколько вещей, которые стоит отметить о pushState:

  • Метод pushState не запускает обновление страницы, но вызывает изменение объекта истории, адресная строка будет реагировать, а браузер будет обновляться только при возникновении таких событий, как перемотка вперед и назад (назад() и вперед() и т. ) срабатывают.
  • URL-адрес здесь ограничен политикой того же происхождения, чтобы предотвратить имитацию вредоносными скриптами URL-адресов других веб-сайтов для обмана пользователей, поэтому при нарушении политики того же происхождения будет сообщено об ошибке.

3.history.replaceState

Отличие replaceState(stateObj, title, url) от pushState в том, что он не пишет, а заменяет и модифицирует текущую запись в истории просмотров, а в остальном точно так же, как pushState

4. событие поп-состояния

  • Определение. Событие popstate запускается всякий раз, когда изменяется история просмотров (то есть объект истории) того же документа.
  • Примечание: Простой вызов метода pushState или метода replaceState не вызовет это событие. Оно будет запущено только тогда, когда пользователь нажмет кнопку браузера «Назад» и «Вперед» или использует JavaScript для вызова методов «Назад», «Вперед» и «Перейти». Кроме того, это событие предназначено только для одного и того же документа, если переключение истории просмотров приводит к загрузке другого документа, это событие не сработает.
  • Использование: при использовании вы можете указать функцию обратного вызова для события popstate. Параметр этой функции обратного вызова является объектом события события, а его свойство состояния указывает на объект состояния, предоставленный методами pushState и replaceState для текущего URL-адреса (то есть первый параметр этих двух методов).

5.history реализует интерфейсный код маршрутизации spa

<a class="api a">a.html</a>
<a class="api b">b.html</a>

 // 注册路由
    document.querySelectorAll('.api').forEach(item => {
      item.addEventListener('click', e => {
        e.preventDefault();
        let link = item.textContent;
        if (!!(window.history && history.pushState)) {
          // 支持History API
          window.history.pushState({name: 'api'}, link, link);
        } else {
          // 不支持,可使用一些Polyfill库来实现
        }
      }, false)
    });

    // 监听路由
    window.addEventListener('popstate', e => {
      console.log({
        location: location.href,
        state: e.state
      })
    }, false)

e.state, напечатанное в функции слушателя popstate, является первым параметром, переданным в history.pushState(), который{name: 'api'}

2. Хэш

1. Базовое введение в Hash

В URL может быть хэшhttp://localhost:9000/#/a.html

Одним из событий в объекте окна является onhashchange, которое будет срабатывать в следующих ситуациях:

  • Измените адрес браузера напрямую, добавьте или измените #hash в конце;
  • Изменив значение location.href или location.hash;
  • Путем срабатывания клика по ссылке с анкором;
  • Браузер вперед и назад может привести к изменению хэша, при условии, что значения хеш-функции в двух адресах веб-страниц различны.

2.Hash реализует интерфейсный код маршрутизации spa

    // 注册路由
    document.querySelectorAll('.api').forEach(item => {
      item.addEventListener('click', e => {
        e.preventDefault();
        let link = item.textContent;
        location.hash = link;
      }, false)
    });

    // 监听路由
    window.addEventListener('hashchange', e => {
      console.log({
        location: location.href,
        hash: location.hash
      })
    }, false)
Категории