导航：traverseTo() 方法

有限可用性

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

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

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

语法

js
traverseTo(key)
traverseTo(key, options)

参数

key

要导航到的 NavigationHistoryEntry 的 key。

options 可选

包含以下属性的选项对象

info 可选

开发人员定义的信息，将传递到 navigate 事件，并在 NavigateEvent.info 中提供。这可以是任何数据类型。例如，您可能希望根据导航方式（向左滑动、向右滑动或返回首页）以不同的动画显示新导航的内容。指示要使用哪个动画的字符串可以作为 info 传递。

返回值

包含以下属性的对象

committed

一个 Promise，当可见 URL 发生更改并创建了新的 NavigationHistoryEntry 时，该 Promise 将完成。

finished

一个 Promise，当 intercept() 处理程序返回的所有 Promise 都完成时，该 Promise 将完成。这等效于 NavigationTransition.finished Promise 完成时，即当 navigatesuccess 事件触发时。

如果导航由于某种原因失败，则这两个 Promise 之一都会拒绝。

异常

InvalidStateError DOMException

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

示例

设置首页按钮

js
function initHomeBtn() {
  // Get the key of the first loaded entry
  // so the user can always go back to this view.
  const { key } = navigation.currentEntry;
  backToHomeButton.onclick = () => {
    navigation.traverseTo(key);
  };
}
// Intercept navigate events, such as link clicks, and
// replace them with single-page navigations
navigation.addEventListener("navigate", (event) => {
  event.intercept({
    async handler() {
      // Navigate to a different view,
      // but the "home" button will always work.
    },
  });
});

规范

规范
HTML 标准
# dom-navigation-traverseto-dev

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅