NavigationDestination

Baseline 2026
Newly available

Since January 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Giao diện NavigationDestination của Navigation API đại diện cho đích đến đang được điều hướng đến trong quá trình điều hướng hiện tại.

Nó được truy cập thông qua thuộc tính NavigateEvent.destination.

Thuộc tính phiên bản

id Read only

Trả về giá trị id của NavigationHistoryEntry đích nếu NavigateEvent.navigationTypetraverse, hoặc một chuỗi rỗng nếu không.

index Read only

Trả về giá trị index của NavigationHistoryEntry đích nếu NavigateEvent.navigationTypetraverse, hoặc -1 nếu không.

key Read only

Trả về giá trị key của NavigationHistoryEntry đích nếu NavigateEvent.navigationTypetraverse, hoặc một chuỗi rỗng nếu không.

sameDocument Read only

Trả về true nếu điều hướng đến cùng document như giá trị Document hiện tại, hoặc false nếu không.

url Read only

Trả về URL đang được điều hướng đến.

Phương thức phiên bản

getState()

Trả về một bản sao của trạng thái có sẵn liên quan đến NavigationHistoryEntry đích, hoặc thao tác điều hướng (ví dụ, navigate()) khi thích hợp.

Ví dụ

js
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);
      },
    });
  }
});

Thông số kỹ thuật

Specification
HTML
# the-navigationdestination-interface

Tương thích trình duyệt

Xem thêm