SAPUI5捕获可选URL参数疑问：为何需加#/及如何规避

嘿，我来帮你拆解这个SAPUI5路由参数的问题——你遇到的必须加#/的情况，其实和SAPUI5默认的路由机制直接相关，咱们一步步说清楚：

为什么必须加#/？ #

SAPUI5默认使用HashRouter（哈希路由），也就是说，只有URL中#/后面的部分才会被SAPUI5的路由系统接管处理。你测试的两种URL本质上是两种完全不同的参数传递方式：

• /webapp/index.html?test=123：这里的test=123是浏览器原生的URL查询参数，不属于SAPUI5路由的处理范围，所以路由事件routeMatched里拿不到相关参数，oEvent.mParameters.data.hash为空也完全正常。
• /webapp/index.html?#/query=123：这里的query=123是放在哈希（#/之后）部分的内容，正好匹配了你manifest路由配置里的:query:占位符，所以能被路由正常捕获到。

另外要明确：你配置的"pattern": "page_1:query:"里的:query:是SAPUI5路由专属的哈希查询参数占位符，它只负责匹配哈希部分的参数，和浏览器URL的?参数不是一回事。

如何避免必须加#/？（直接获取浏览器URL的?参数） #

如果想直接捕获浏览器URL里?后面的参数（比如?test=123这种形式），不需要修改路由pattern，直接通过浏览器API或者SAPUI5内置方法就能轻松获取：

方法1：用原生浏览器API获取 #

handleRouteMatched: function(oEvent) {
  // 解析浏览器URL的查询参数
  const oUrlParams = new URLSearchParams(window.location.search);
  const sTestValue = oUrlParams.get("test"); // 拿到"123"
  console.log("浏览器查询参数test的值：", sTestValue);
  
  // 如果有多个参数，也可以一次性获取所有键值对
  const allParams = Object.fromEntries(oUrlParams);
  console.log("所有浏览器查询参数：", allParams);
}

方法2：用SAPUI5内置方法获取 #

handleRouteMatched: function(oEvent) {
  const oComponent = this.getOwnerComponent();
  const oHashChanger = oComponent.getRouter().getHashChanger();
  // 获取浏览器URL的查询参数（返回对象格式）
  const oQueryParams = oHashChanger.getQueryParameters();
  console.log("SAPUI5获取的浏览器查询参数：", oQueryParams);
}

补充：正确使用路由的:query:占位符 #

如果还是想用SAPUI5路由的:query:来捕获参数，记得要把参数放在哈希路径之后，正确的URL格式应该是：
/webapp/index.html#/page_1?test=123&bla=456

这时你的路由配置"pattern": "page_1:query:"就能正常匹配，然后在handleRouteMatched里这样解析：

handleRouteMatched: function(oEvent) {
  const oArgs = oEvent.getParameter("arguments");
  if (oArgs.query) {
    const oQueryParams = new URLSearchParams(oArgs.query);
    const sTest = oQueryParams.get("test");
    const sBla = oQueryParams.get("bla");
    console.log("路由捕获的test参数：", sTest);
    console.log("路由捕获的bla参数：", sBla);
  }
}

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