这篇博文的目的是展示如何使用SAPUI5路由API实现基于Fiori设计准则的分屏布局。源代码的完整工作示例在这里可用

分屏布局是一种主/细节模式，具有以下特点：

用户可以快速扫描左侧的项目，并在右侧看到所选项目的细节。详细信息区域还可能有一个列表，什么是物联网应用技术，用户可以在其中向下钻取其他详细信息。用户可以导航回上一页。

例如，左侧的订单列表和右侧的订单详细信息。"订单详细信息"区域包含该特定订单的产品列表。用户可以深入了解每个产品的详细信息。在产品详细信息页面，用户可以导航回订单详细信息页面。

在本文中，我们将按照下面的屏幕截图实现此场景。

有关拆分屏幕布局的更多信息，请单击此处

结构：

如您所见，我们有3个视图：

此外，我们将有一个组件控制器(组件.js)包含路由元数据和配置。

有关组件控制器的更多信息，请单击此处

中的路由器配置组件.js：

在组件.js, 我们将定义3条路径：

完整的配置如下：

从主目录向下钻取到详细目录1：

现在我们要从主目录（订单列表）向下钻取到详细目录。在主控视图中，我们必须在主控的控制器中的ListItem

上附加"press"事件，我们将使用路由器的navTo方法。navTo方法需要以下参数：

route name（必选）：这是我们要使用的路由的名称。在本例中，我们希望导航到order details视图（Detail1），因此我们将使用"orderDetails"。参数（可选）：这里我们可以将参数传递给下一个视图。在我们的例子中，orderdetails视图需要知道我们按下的项目的orderid。替换（可选）：在这里我们可以控制浏览器历史行为。如果为true，则不会将路由添加到浏览器历史记录中，大数据是做什么的，如果为false，国内大数据公司排名，则路由将添加到浏览器历史记录中，返利淘客，以便"后退"按钮记住路由。

从Detail1向下钻取到Detail2:

同样，我们将使用"按"事件和navTo方法从订单详细信息视图（Detail1）导航到产品详细信息（Detail2）。然而，这次我们将使用"productDetails"路由，我们将传递两个参数：orderId和productId:

从Detail1（order detail）导航回Master:

根据Fiori设计指南中的分屏布局，Master list和details在手机的窄屏上被分为两个独立的页面。因此，我们的目标是只在手机上显示后退按钮。要实现这一点，首先我们需要一种方法来识别用户的设备。我们可以使用设备API检查用户的设备，其中sap.ui.Device设备类提供所需的信息。

页面组件具有showNavButton属性，该属性需要布尔值。因此，这里我们将它绑定到/system/phone

在事件处理程序方法中，我们将使用History API使用浏览器历史并导航回

从Detail2（产品细节）导航回Detail1（订单细节）：

这应该是直接的。我们将使用与上一步相同的技术。但是这次showNavButton总是正确的，因为设备并不重要。

另外，我们将使用History API来处理onNavBack press事件：

处理浏览器窗口的标题：

到目前为止，我们实现了向下钻取和向后导航场景，因此用户可以在应用程序中导航到不同的视图。但是当您查看浏览器历史记录时，窗口标题保持不变，这让用户感到困惑。这里的目标是根据我们访问的视图更改浏览器标题。

从版本1.42开始，路由API提供了在其配置中声明定义标题的可能性。为了实现这一点，我们需要定义title并将其绑定到orderName属性，如下所示：

为了在title更改后得到通知，您可以注册到路由器实例上的"titleChanged"事件。一旦显示设置了标题选项的目标或更改了显示目标的标题，个人用云服务器，就会触发"titleChanged"事件。