View in English Always switch to English

NavigationDestination

基线 2026

实例属性

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())相关的可用状态的克隆。

示例

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

规范

规范
HTML # the-navigationdestination-interface

浏览器兼容性

参见

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 2025年1月3日,由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题