NavigationDestination

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

导航 API 的 NavigationDestination 接口表示当前导航中要导航到的目标。

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

实例属性

id 只读

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

index 只读

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

key 只读

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

sameDocument 只读

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

url 只读

返回导航到的 URL 地址。

实例方法

getState()

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

示例

js
navigation.addEventListener("navigate", (event) => {
  // 如果此导航不应被拦截，则提前退出，例如，如果导航是跨源的，或者是下载请求
  if (shouldNotIntercept(event)) {
    return;
  }

  // 返回由 NavigationDestination.url 值构造的 URL() 对象
  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        // URL 已更改，因此在获取新内容时显示占位符，例如旋转图标或加载页面
        renderArticlePagePlaceholder();

        // 获取新内容并在准备就绪时显示
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);
      },
    });
  }
});

规范

Specification
HTML
# the-navigationdestination-interface

浏览器兼容性

BCD tables only load in the browser

参见