NavigateEvent：navigationType 属性

Limited availability

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

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

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

值

代表导航的类型的枚举值。

可能的值包括：

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

示例

具有特殊后退/前进处理的异步转换

有时需要特别处理后退/前进导航，例如通过将缓存的视图转换到屏幕上来重用它们。这可以通过以下分支来实现：

js
navigation.addEventListener("navigate", (event) => {
  // 有些导航，例如跨源导航，我们无法拦截。让浏览器正常处理这些导航。
  if (!event.canIntercept) {
    return;
  }

  // 不要拦截片段导航或下载。
  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 {
        // 这可能会导致 myFramework 将渲染的页面存储在 myFramework.previousPages 中。
        await myFramework.renderPage(event.destination);
      }
    },
  });
});

规范

Specification
HTML
# dom-navigateevent-navigationtype-dev

浏览器兼容性

BCD tables only load in the browser

参见