如何在SAPUI5中向Router.navTo传递MultiComboBox的数组值

问题背景 #

将原有的soldTo普通ComboBox改为MultiComboBox后，this.soldTo变为数组，调用路由跳转时出现错误：

Uncaught TypeError: Cannot read properties of null (reading 'length')

原路由调用代码：

this._oRouter.navTo("SearchResult", {
    soldTo: this.soldTo,
    shipTo: this.shipTo,
}, false);

原manifest.json路由配置中SearchResult的pattern为：

"pattern": "{soldTo}/{shipTo}/SearchResult"

问题原因 #

SAPUI5路由参数默认仅支持字符串类型，直接传递数组会导致路由解析逻辑异常；同时原路径式的参数占位符无法适配多值场景，进一步引发参数解析错误。

解决方案 #

1. 转换数组为字符串传递 #

将MultiComboBox的数组值转换为逗号分隔的字符串，同时处理空值避免参数异常：

this._oRouter.navTo("SearchResult", {
    soldTo: this.soldTo?.join(",") || "", // 数组转逗号分隔字符串，空数组/空值时传空串
    shipTo: this.shipTo
}, false);

2. 修改路由配置为查询参数模式（推荐） #

路径式参数更适合单值场景，多值参数建议改用查询参数，修改manifest.json中SearchResult的路由配置：

{
    "pattern": "SearchResult?soldTo={soldTo}&shipTo={shipTo}",
    "name": "SearchResult",
    "target": [
        "SearchResult"
    ]
}

3. 目标页面接收参数并转回数组 #

在SearchResult页面控制器中，将接收的字符串参数转回数组：

onInit: function() {
    this.getRouter().getRoute("SearchResult").attachPatternMatched(this._onPatternMatched, this);
},

_onPatternMatched: function(oEvent) {
    const oArguments = oEvent.getParameter("arguments");
    // 字符串转回数组，处理空参数情况
    const aSoldTo = oArguments.soldTo ? oArguments.soldTo.split(",") : [];
    const sShipTo = oArguments.shipTo;

    // 后续业务逻辑使用aSoldTo数组
    // ...
}

可选方案：路径式多值参数（不推荐） #

若坚持使用路径参数，可在pattern中添加*标记支持多值，但需注意参数编码：

• 修改manifest.json的pattern：

"pattern": "{soldTo*}/{shipTo}/SearchResult"

• 传递时用特殊分隔符（如|）拼接数组：

soldTo: this.soldTo?.join("|") || ""

• 接收时拆分：

const aSoldTo = oArguments.soldTo ? oArguments.soldTo.split("|") : [];

这种方式需注意分隔符不能与参数值冲突，查询参数模式更灵活可靠。

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