Navigation：traverseTo() 方法

Limited availability

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

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

Navigation 接口的 traverseTo() 方法导航到由给定的 key 标识的 NavigationHistoryEntry。

语法

js
traverseTo(key)
traverseTo(key, options)

参数

key

要导航到的 NavigationHistoryEntry 的 key。

options 可选

包含以下属性的选项对象：

info 可选

开发者定义的信息，将传递给 navigate 事件，可在 NavigateEvent.info 中获取。这可以是任何数据类型。例如，你可能希望根据导航方式（向左滑动、向右滑动或返回主页）以不同的动画显示新导航的内容。可以传入一个字符串来指示要使用哪种动画，该字符串可作为 info 选项传入。

返回值

包含以下属性的对象：

committed

当可见 URL 发生改变并且新的 NavigationHistoryEntry 被创建时被兑现的 Promise。

finished

当 intercept() 处理器返回的所有 promise 都被兑现时被兑现的 Promise。这相当于当 navigatesuccess 事件触发时，兑现 NavigationTransition.finished promise。

如果导航由于某种原因失败，则这两个 promise 中的某一个会被拒绝。

异常

InvalidStateError DOMException

如果 Navigation.currentEntry 的 NavigationHistoryEntry.index 值为 -1，这意味着当前 Document 尚未激活，或者导航历史记录列表不包含具有指定键的 NavigationHistoryEntry，或者当前 Document 正在卸载，则抛出此异常。

示例

设置主页按钮

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

规范

Specification
HTML
# dom-navigation-traverseto-dev

浏览器兼容性

BCD tables only load in the browser

参见