SAP UI5路由参数传递进阶教程：实现视图间数据传递

在SAP UI5应用开发中，路由是实现不同视图间导航的核心机制。仅仅完成导航还不够，我们通常需要在切换视图时传递特定数据，例如从一个列表项跳转到其对应的详情页。本教程将深入讲解如何在SAP UI5的路由过程中进行参数传递，实现视图间的数据联动。

需求场景与实现效果

假设我们正在开发一个发票管理应用。主视图是一个发票列表，当用户点击列表中某一行项目时，应用应导航至详情视图，并自动显示该行项目的具体信息。

下图展示了发票列表页面，点击任意一行即可触发路由：

点击后，应用成功路由到详情页面，浏览器地址栏的URL哈希部分也随之改变，这标志着一次成功的导航：

本文的目标是，在上述导航过程中，将所点击列表项的标识（如发票ID）传递给详情视图。详情视图接收到参数后，能自动向后台请求或从现有模型中筛选出对应数据并展示。最终效果如下，详情页正确显示了特定发票的ShipperName和ProductName字段：

技术实现步骤

SAP UI5的路由参数传递主要涉及路由配置、触发导航时传递参数、以及在目标视图中获取并使用参数三个环节。这本质上是一种高效的前端框架数据状态管理方式。

1. 路由配置：定义参数模式

首先，需要在manifest.json文件的路由配置中，为目标路由的模式（pattern）定义参数占位符。

"routes": [
  {
    "name": "Detail",
    "pattern": "detail/{invoicePath}",
    "target": "detail"
  }
]

在上面的配置中，{invoicePath}就是一个参数占位符，它将在导航时被实际的值替换。

2. 触发导航：传递参数值

在列表视图的控制器中，处理行点击事件，并使用路由服务进行导航，同时传递参数。

onPress: function(oEvent) {
  var oItem = oEvent.getSource();
  var oBindingContext = oItem.getBindingContext("invoice");
  var sPath = encodeURIComponent(oBindingContext.getPath());

  this.getOwnerComponent().getRouter().navTo("Detail", {
    invoicePath: sPath
  });
}

这里的关键是navTo方法的第二个参数，它是一个键值对对象。键invoicePath对应路由模式中的占位符名称，值sPath是经过编码的模型路径（例如/Invoices(‘12345’)），它唯一标识了列表中被点击的项。

3. 目标视图：获取并使用参数

在详情视图的控制器中，可以在onInit或路由匹配到的回调函数中，通过事件参数获取传递过来的值。

onInit: function() {
  this.getOwnerComponent().getRouter().getRoute("Detail").attachPatternMatched(this._onPatternMatched, this);
},
_onPatternMatched: function(oEvent) {
  var sDecodedPath = decodeURIComponent(oEvent.getParameter("arguments").invoicePath);
  this.getView().bindElement({
    path: sDecodedPath,
    model: "invoice"
  });
}

在_onPatternMatched函数中，我们从事件参数中取出invoicePath的值，解码后，通过bindElement方法将详情视图的数据绑定上下文设置为该路径。这样，视图上所有绑定到invoice模型的控件（如显示{invoice>ShipperName}的Text控件）都会自动显示该路径对应数据。

这个过程充分体现了声明式数据绑定的优势，控制器只需处理上下文切换，视图自动更新。后台数据交互通常采用OData等标准协议，这与数据库与中间件的高效数据服务理念一致。

总结

通过“配置-传递-获取”三个步骤，我们实现了在SAP UI5路由间传递复杂参数的功能。这种方式使得应用的不同模块能够解耦又协同工作，是构建复杂单页面应用（SPA）的基石。掌握路由参数传递，能让你更灵活地设计应用的信息架构与用户流。