Skip to Content
IoT 仪表盘页面与导航

页面与导航

IronFlock Board 不限于单个屏幕。您可以创建多个页面,并使用导航组件在它们之间平滑切换——为用户提供简单、可点击的方式在页面之间跳转。

Navigation demo

导航工作原理

导航由路由驱动。路由是 URL 中 .../home/ 之后的部分,告诉 IronFlock 显示哪个页面。

  • 添加新页面 → 为其创建新路由。
  • 导航组件更改地址栏中的路由 → IronFlock 立即显示链接的页面。

导航组件类型

有三种导航组件可供选择:

  • 侧边导航 — 垂直侧边栏菜单,适合顶层分区。可以显示静态项目,也可以从数据动态生成项目(例如,为项目中的每台设备生成一个条目)。
  • 标签栏 — 水平标签栏,用于在页面内的子视图之间切换。
  • 导航按钮 — 链接到特定页面的单个按钮。

相对路由与绝对路由

导航组件支持两种路由方式:

  • 绝对路由以斜杠开头(例如 /settings/device1),始终导航到该确切路由。
  • 相对路由没有前导斜杠(例如 device2/profile),替换当前路由的最后一个片段。

示例: 如果您当前在 /settings/device1,导航到 device2/profile,新路由变为 /settings/device2/profile

注意:/settings/settings/ 不同:

  • /settings 导航到 device1 结果为 /device1
  • /settings/ 导航到 device1 结果为 /settings/device1

动态路由

无需为项目中的每台设备创建单独的页面,您可以使用带 *通配符路由

示例: 创建一个路由为 /assets/* 的页面。任何像 /assets/device1/assets/device2/assets/anything 的路由都会显示这个同一个页面。

在页面内,组件可以读取路由片段来自动筛选数据。如果 URL 是 /assets/device1,片段为:

  • 片段 1 → assets
  • 片段 2 → device1

将组件配置为按片段 2 筛选,它将自动显示 URL 中对应设备的数据。导航到 /assets/device2,同一个页面会自动适配并显示 device2 的数据——无需重复创建页面。

通过导航组件和动态路由,您的 Board 变得模块化且具有项目感知能力。无论您有 5 台设备还是 5,000 台设备,都可以在没有杂乱和复杂性的情况下导航和管理它们。

Last updated on