NavigationHistoryEntry：key 属性

Limited availability

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

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

NavigationHistoryEntry 接口的 key 只读属性返回历史条目的 key，如果当前文档未完全激活，则返回空字符串。这是一个唯一的 UA 生成值，表示历史条目在条目列表中的位置。它用于通过 Navigation.traverseTo() 导航该特定位置。key 将被替换列表中条目的其他条目重用（即，如果 NavigateEvent.navigationType 为 replace）。

这与历史条目的 id 不同。id 是一个唯一的 UA 生成值，它始终表示特定的历史条目，而不是其在条目列表中的位置。这对于将其与外部资源（如存储缓存）关联非常有用。

值

表示 NavigationHistoryEntry 的 key 的字符串。

示例

基本用法

js
const current = navigation.currentEntry;
console.log(current.key);

设置主页按钮

js
function initHomeBtn() {
  // 获取第一个加载条目的键，以便用户可以随时返回该视图。
  const { key } = navigation.currentEntry;
  backToHomeButton.onclick = () => {
    navigation.traverseTo(key);
  };
}
// 拦截导航事件（例如链接点击），并将其替换为单页导航
navigation.addEventListener("navigate", (event) => {
  event.intercept({
    async handler() {
      // 导航到不同的视图，但“主页”按钮始终有效。
    },
  });
});

规范

Specification
HTML
# dom-navigationhistoryentry-key-dev

浏览器兼容性

BCD tables only load in the browser

参见