Навигация: метод navigate()

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает в некоторых широко используемых браузерах.

Экспериментально: Это экспериментальная технология экспериментальная технология
Перед использованием в продакшене внимательно ознакомьтесь со таблицей совместимости браузеров.

Метод navigate() интерфейса Navigation переходит по определенному URL, обновляя любой предоставленный состояние в списке записей истории.

Синтаксис

navigate(url)
navigate(url, options)

Параметры

url

URL назначения для перехода. Обратите внимание, что при вызове navigate() на объект navigation другого окна, URL будет разрешен относительно URL целевого окна, а не окна вызова. Это соответствует поведению API истории, но не соответствует поведению API местоположения.

options Необязательно

Объект опций, содержащий следующие свойства:

state Необязательно

Определяемая разработчиком информация, которая будет храниться в связанной записи NavigationHistoryEntry после завершения навигации, доступная через getState(). Это может быть любой тип данных. Например, вы можете хранить количество посещений страницы для аналитики или сохранять данные состояния пользовательского интерфейса, чтобы отобразить представление точно так же, как пользователь его покинул. Любые данные, хранящиеся в state должны быть структурируемо клонируемыми.

info Необязательно

Определяемая разработчиком информация, которая будет передана в событие navigate, доступная в NavigateEvent.info. Это может быть любой тип данных. Например, вы можете отобразить недавно просмотренное содержимое с другой анимацией в зависимости от того, как оно было отображено (свайп влево, свайп вправо или переход домой). Строка, указывающая используемую анимацию, может быть передана как info.

history Необязательно

Перечисление, устанавливающее поведение истории для этой навигации. Доступные значения:

auto: Значение по умолчанию; обычно выполняет навигацию push, но выполняет навигацию replace в особых случаях (см. описание NotSupportedError ниже).
push: Добавит новую запись NavigationHistoryEntry в список записей или завершится ошибкой в особых случаях (см. описание NotSupportedError ниже).
replace: Заменит текущую запись NavigationHistoryEntry.

Возвращаемое значение

Объект со следующими свойствами:

committed: Обещание Promise, которое выполнится, когда видимый URL изменится и будет создана новая запись NavigationHistoryEntry.
finished: Обещание Promise, которое выполнится, когда все обещания, возвращенные обработчиком intercept(), будут выполнены. Это эквивалентно выполнению обещания NavigationTransition.finished, когда происходит событие navigatesuccess.

Любое из этих обещаний отклонится, если навигация завершится ошибкой по какой-либо причине.

Исключения

DataCloneError DOMException

Выбрасывается, если параметр state содержал значения, которые не являются структурируемо клонируемыми.

SyntaxError DOMException

Выбрасывается, если параметр url не является допустимым URL.

NotSupportedError DOMException

Выбрасывается, если опция history установлена в push, и справедливо любое из следующих особых обстоятельств:

Браузер в настоящее время отображает начальный about:blank документ.
Схема url имеет схему javascript.

Примеры

Настройка кнопки "Домой"

function initHomeBtn() {
  // Get the key of the first loaded entry
  // so the user can always go back to this view.
  const { key } = navigation.currentEntry;
  backToHomeButton.onclick = () => {
    navigation.traverseTo(key);
  };
}
// Intercept navigate events, such as link clicks, and
// replace them with single-page navigations
navigation.addEventListener("navigate", (event) => {
  event.intercept({
    async handler() {
      // Navigate to a different view,
      // but the "home" button will always work.
    },
  });
});

Умная кнопка "Назад"

Кнопка "назад", предоставляемая страницей, может вернуть вас назад, даже после перезагрузки, путем проверки предыдущих записей истории:

backButtonEl.addEventListener("click", () => {
  if (
    navigation.entries()[navigation.currentEntry.index - 1]?.url ===
    "/product-listing"
  ) {
    navigation.back();
  } else {
    // If the user arrived here in some other way
    // e.g. by typing the URL directly:
    navigation.navigate("/product-listing", { history: "replace" });
  }
});

Использование info и state

async function navigateHandler() {
  await navigation.navigate(url, {
    info: { animation: "swipe-right" },
    state: { infoPaneOpen: true },
  }).finished;

  // Update application state
  // ...
}

Спецификации

Спецификация
HTML # dom-navigation-navigate-dev

Совместимость браузеров

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`navigate`	102	102	Нет	88	Нет	102	Нет	70	Нет	19.0	102

См. также

Современное клиентское маршрутизирование: API навигации
Описание API навигации
Живой демонстрационный пример API навигации от Domenic Denicola здесь

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Navigation/navigate