Navigation

实例属性

从其父接口 EventTarget 继承属性。

activation 只读 实验性

返回一个 NavigationActivation 对象，其中包含有关“激活”此文档的最新跨文档导航的信息。

canGoBack 只读 实验性

如果可以在导航历史记录中向后导航（即 currentEntry 不是历史记录条目列表中的第一个），则返回 true，如果不能，则返回 false。

canGoForward 只读 实验性

如果可以在导航历史记录中向前导航（即 currentEntry 不是历史记录条目列表中的最后一个），则返回 true，如果不能，则返回 false。

currentEntry 只读 实验性

返回一个 NavigationHistoryEntry 对象，表示用户当前导航到的历史记录。

transition 只读 实验性

返回一个 NavigationTransition 对象，表示正在进行的导航的状态，可用于跟踪导航。如果当前没有正在进行的导航，则返回 null。

实例方法

从其父接口 EventTarget 继承方法。

back() 实验性

在导航历史记录中向后导航一个条目。

entries() 实验性

返回一个 NavigationHistoryEntry 对象数组，代表所有现有的历史记录条目。

forward() 实验性

在导航历史记录中向前导航一个条目。

navigate() 实验性

导航到特定的 URL，更新历史记录条目列表中提供的任何状态。

reload() 实验性

重新加载当前 URL，更新历史记录条目列表中提供的任何状态。

traverseTo() 实验性

导航到由 key 标识的特定 NavigationHistoryEntry。

updateCurrentEntry() 实验性

更新 currentEntry 的状态；用于状态改变与导航或重新加载无关的情况。

事件

从其父级接口 EventTarget 继承事件。

currententrychange 实验性

当 Navigation.currentEntry 发生改变时触发。

navigate 实验性

开始时触发，允许你根据需要进行拦截。

navigateerror 实验性

导航失败时触发。

navigatesuccess 实验性

导航成功完成后触发。

示例

在历史记录中前进和后退

async function backHandler() {
  if (navigation.canGoBack) {
    await navigation.back().finished;
    // 导航结束后处理任何必要的清理工作
  } else {
    displayBanner("你在第一页");
  }
}

async function forwardHandler() {
  if (navigation.canGoForward) {
    await navigation.forward().finished;
    // 导航结束后处理任何必要的清理工作
  } else {
    displayBanner("你在最后一页");
  }
}

遍历到特定的历史记录条目

// 在 JS 启动时，获取第一个加载页面的键，以便用户可以随时返回该页面。
const { key } = navigation.currentEntry;
backToHomeButton.onclick = () => navigation.traverseTo(key);

// 导航离开，但按钮始终有效。
await navigation.navigate("/another_url").finished;

导航和更新状态

navigation.navigate(url, { state: newState });

或

navigation.reload({ state: newState });

或者如果状态独立于导航或重新加载：

navigation.updateCurrentEntry({ state: newState });

规范

浏览器兼容性

参见

• 现代客户端路由：导航 API
• 导航 API 说明
• Domenic Denicola 的导航 API 在线演示