NavigateEvent：navigationType 属性

有限可用性

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

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

navigationType 是 NavigateEvent 接口的只读属性，它返回导航的类型 - push、reload、replace 或 traverse。

值

一个枚举值，表示导航的类型。

可能的值为

  • push：导航到一个新的位置，导致一个新的条目被推送到历史列表中。
  • reload：重新加载 Navigation.currentEntry。
  • replace：用一个新的历史条目替换 Navigation.currentEntry。这个新的条目将重用相同的 key，但会被分配一个不同的 id。
  • traverse：浏览器从一个现有的历史条目导航到另一个现有的历史条目。

示例

带特殊前后处理的异步过渡

有时需要特殊处理前后导航，例如通过将缓存的视图转换到屏幕上以重用它们。这可以通过以下方式分支来完成

js
navigation.addEventListener("navigate", (event) => {
  // Some navigations, e.g. cross-origin navigations, we
  // cannot intercept. Let the browser handle those normally.
  if (!event.canIntercept) {
    return;
  }

  // Don't intercept fragment navigations or downloads.
  if (event.hashChange || event.downloadRequest !== null) {
    return;
  }

  event.intercept({
    async handler() {
      if (myFramework.currentPage) {
        await myFramework.currentPage.transitionOut();
      }

      let { key } = event.destination;

      if (
        event.navigationType === "traverse" &&
        myFramework.previousPages.has(key)
      ) {
        await myFramework.previousPages.get(key).transitionIn();
      } else {
        // This will probably result in myFramework storing
        // the rendered page in myFramework.previousPages.
        await myFramework.renderPage(event.destination);
      }
    },
  });
});

规范

规范
HTML 标准
# dom-navigateevent-navigationtype-dev

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅