导航目标

可用性有限

此功能不是基线功能，因为它在一些最广泛使用的浏览器中无法工作。

实验性： 这是一个 实验性技术
在生产环境中使用之前，请仔细查看 浏览器兼容性表。

NavigationDestination 是 导航 API 的一个接口，它表示当前导航中要导航到的目标。

可以通过 NavigateEvent.destination 属性访问它。

实例属性

id 只读

如果 NavigateEvent.navigationType 为 traverse，则返回目标 NavigationHistoryEntry 的 id 值，否则返回空字符串。

index 只读

如果 NavigateEvent.navigationType 为 traverse，则返回目标 NavigationHistoryEntry 的 index 值，否则返回 -1。

key 只读

如果 NavigateEvent.navigationType 为 traverse，则返回目标 NavigationHistoryEntry 的 key 值，否则返回空字符串。

sameDocument 只读

如果导航的目标与当前 Document 值相同，则返回 true，否则返回 false。

url 只读

返回要导航到的 URL。

实例方法

getState()

返回与目标 NavigationHistoryEntry 或导航操作（例如 navigate()）关联的可用状态的克隆。

示例

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

规范

规范
HTML 标准
# the-navigationdestination-interface

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅