NavigateEvent:info 属性

有限可用性

此功能不是基线,因为它在一些最常用的浏览器中无法使用。

实验性: 这是 实验性技术
在生产环境中使用之前,请仔细查看 浏览器兼容性表格

NavigateEvent 接口的只读属性 info 返回由发起导航操作(例如 Navigation.back()Navigation.navigate())传递的 info 数据值,如果未传递 info 数据,则返回 undefined

由发起导航操作传递的 info 值,如果未传递任何值,则返回 undefined

示例

info 的一个使用示例是根据到达某个路由的方式触发不同的单页面导航渲染。例如,考虑一个照片库应用程序,您可以通过不同的路由到达相同的照片 URL 和状态。您可能希望使用不同的动画来显示每个路由的照片。

js
navigation.addEventListener("navigate", (event) => {
  if (isPhotoNavigation(event)) {
    event.intercept({
      async handler() {
        switch (event.info?.via) {
          case "go-left": {
            await animateLeft();
            break;
          }
          case "go-right": {
            await animateRight();
            break;
          }
          case "gallery": {
            await animateZoomFromThumbnail(event.info.thumbnail);
            break;
          }
        }

        // TODO: actually load the photo.
      },
    });
  }
});

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅