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
idRead only-
Trả về giá trị
idcủaNavigationHistoryEntryđích nếuNavigateEvent.navigationTypelàtraverse, hoặc một chuỗi rỗng nếu không. indexRead only-
Trả về giá trị
indexcủaNavigationHistoryEntryđích nếuNavigateEvent.navigationTypelàtraverse, hoặc-1nếu không. keyRead only-
Trả về giá trị
keycủaNavigationHistoryEntryđích nếuNavigateEvent.navigationTypelàtraverse, hoặc một chuỗi rỗng nếu không. sameDocumentRead only-
Trả về
truenếu điều hướng đến cùngdocumentnhư giá trịDocumenthiện tại, hoặcfalsenếu không. urlRead 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ụ
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> |