NavigationDestination

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

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

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

Интерфейс NavigationDestination API навигации представляет собой место назначения, к которому происходит навигация в текущей навигации.

К нему можно получить доступ через свойство NavigateEvent.destination.

Свойства экземпляра

id Только для чтения Экспериментально: Возвращает значение id назначения NavigationHistoryEntry, если NavigateEvent.navigationType равно traverse, или пустую строку в противном случае.
index Только для чтения Экспериментально: Возвращает значение index назначения NavigationHistoryEntry, если NavigateEvent.navigationType равно traverse, или -1 в противном случае.
key Только для чтения Экспериментально: Возвращает значение key назначения NavigationHistoryEntry, если NavigateEvent.navigationType равно traverse, или пустую строку в противном случае.
sameDocument Только для чтения Экспериментально: Возвращает true если навигация происходит к тому же document документу, что и текущее значение Document, или false в противном случае.
url Только для чтения Экспериментально: Возвращает URL, к которому происходит навигация.

Методы экземпляра

getState() Экспериментально: Возвращает копию доступного состояния, связанного с местом назначения NavigationHistoryEntry, или операцией навигации (например, navigate()), в зависимости от ситуации.

Примеры

navigation.addEventListener("navigate", (event) => {
  // Exit early if this navigation shouldn't be intercepted,
  // e.g. if the navigation is cross-origin, or a download request
  if (shouldNotIntercept(event)) {
    return;
  }

  // Returns a URL() object constructed from the
  // NavigationDestination.url value
  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        // The URL has already changed, so show a placeholder while
        // fetching the new content, such as a spinner or loading page
        renderArticlePagePlaceholder();

        // Fetch the new content and display when ready
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);
      },
    });
  }
});

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

Спецификация
HTML # the-navigationdestination-interface

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`NavigationDestination`	102	102	Нет	88	Нет	102	Нет	70	Нет	19.0	102
`getState`	102	102	Нет	88	Нет	102	Нет	70	Нет	19.0	102
`id`	102	102	Нет	88	Нет	102	Нет	70	Нет	19.0	102
`index`	102	102	Нет	88	Нет	102	Нет	70	Нет	19.0	102
`key`	102	102	Нет	88	Нет	102	Нет	70	Нет	19.0	102
`sameDocument`	102	102	Нет	88	Нет	102	Нет	70	Нет	19.0	102
`url`	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/NavigationDestination