SAP UI5 Route Pattern匹配未触发 同编号单据详情展示错误问题

我采用master detail主从布局开发，在主页面中使用IconTabFilter拆分待处理、已处理两类单据。用户从待处理或已处理页签选中任意单据后将跳转展示详情页：待处理单据的Approve按钮为启用状态，已处理单据的Approve按钮为禁用状态。当前我们的主页面、详情页为独立视图，存在同一单据同时出现在待处理和已处理页签的场景。

目前遇到的问题为：当同一编号的单据同时存在于待处理和已处理页签时，因二者对应URL相同，objectPatternMatched函数不会被触发，导致详情页展示的数据不正确。

你可以从路由规则调整、参数透传两个方向解决该问题，以下是可落地的实现方案：

方案1：调整路由规则，将单据状态纳入路由参数 #

这是最符合SAP UI5路由设计规范的方案，从根源上区分两种场景的URL：

1. 修改manifest.json中的详情页路由配置，新增docStatus路径参数：

{
  "pattern": "detail/{docStatus}/{docId}",
  "name": "detail",
  "target": "detail"
}

2. 主页面跳转逻辑调整，选中单据时将当前页签的状态（待处理传pending、已处理传processed）和单据ID一起传入navTo方法：

this.getOwnerComponent().getRouter().navTo("detail", {
  docStatus: sCurrentTabStatus,
  docId: sSelectedDocId
});

3. 详情页objectPatternMatched事件中直接拿到状态和ID，加载对应数据并控制按钮状态：

_onObjectPatternMatched: function(oEvent) {
  const oArgs = oEvent.getParameter("arguments");
  const sDocStatus = oArgs.docStatus;
  const sDocId = oArgs.docId;
  // 加载对应状态的单据数据
  this._loadDocData(sDocStatus, sDocId);
  // 控制审批按钮状态
  this.byId("approveBtn").setEnabled(sDocStatus === "pending");
}

方案2：新增查询参数区分场景，不改变URL核心路径 #

如果不想修改URL的路径结构，可以通过可选查询参数实现URL差异：

1. 修改manifest.json中的详情页路由配置，新增可选查询参数：

{
  "pattern": "detail/{docId}?:query:",
  "name": "detail",
  "target": "detail"
}

2. 跳转时传入status查询参数：

this.getOwnerComponent().getRouter().navTo("detail", {
  docId: sSelectedDocId,
  query: {
    status: sCurrentTabStatus
  }
});

该方案下即使单据ID相同，查询参数不同也会触发objectPatternMatched事件，后续数据加载和按钮控制逻辑和方案1一致。

方案3：强制触发路由匹配（仅做临时兜底） #

如果暂时无法调整路由配置，可以在跳转时强制触发详情页的路由匹配事件：

// 主页面跳转逻辑
const oRouter = this.getOwnerComponent().getRouter();
oRouter.navTo("detail", {docId: sSelectedDocId});
// 手动触发详情页的匹配事件，传入状态参数
oRouter.getRoute("detail").firePatternMatched({
  arguments: {
    docId: sSelectedDocId,
    docStatus: sCurrentTabStatus
  }
});

该方案会绕过路由的hash校验逻辑，不支持浏览器前进后退操作，仅适合临时修复使用。

内容的提问来源于stack exchange，提问作者rs9