浏览器刷新页面时UI5 Router的onMatched回调未触发原因咨询

我有一个包含RootComponent的应用，该组件包含两个嵌套组件。其中名为UserComponent的组件展示FlexibleColumnLayout，并定义了带有两个URL参数的路由：

{
    "pattern": "detail/{objectId}/detailDetail/{treeObjectId}/{layout}",
    "name": "detailDetail",
    "target": [
        "list",
        "detail",
        "detailDetail"
    ],
    "greedy": true
}

随后我在控制器中尝试通过以下方式获取对应的URL参数：

onInit: function() {
    console.log("onInit() DetailController");
    // ...
    this.oRouter = this.getOwnerComponent().getRouter();
    this.oRouter.getRoute("list").attachMatched(this._onUrlMatched, this);
    this.oRouter.getRoute("detail").attachMatched(this._onUrlMatched, this);
    this.oRouter.getRoute("detailDetail").attachMatched(this._onUrlMatched, this);
},

_onUrlMatched: function(oEvent) {
    console.log("onUrlMatched()");
    // Fetch URL parameters...
    // Do something with the URL parameters...
},

观察到的行为：

• 分步导航（list、detail、detailDetail）展开FlexibleColumnLayout时，_onUrlMatched回调正确触发，URL参数解析正常。
• 刷新页面或在新标签页粘贴完整URL时，尽管所有相关控制器的onInit()已执行，但_onUrlMatched回调未被调用。

已参考一个嵌套组件官方示例（未使用FlexibleColumnLayout），未发现manifest.xml或控制器实现的差异，请问为何刷新页面时回调不触发？

核心原因 #

页面刷新或直接加载深层URL时，路由匹配事件在控制器onInit执行前就已经触发，此时你绑定的attachMatched监听器还未完成注册，自然无法捕获到事件。而分步导航时，事件是在监听器注册完成后触发的，所以能正常回调。

解决步骤 #

1. 提前在组件层面注册路由监听器
   不要在控制器onInit中绑定事件，改为在组件的init生命周期钩子中注册——组件初始化时机早于路由匹配事件触发时机，能确保监听器及时生效：

   // 组件的Component.js
   init: function() {
       sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
       const oRouter = this.getRouter();
       // 绑定路由匹配事件
       oRouter.getRoute("list").attachMatched(this._onUrlMatched, this);
       oRouter.getRoute("detail").attachMatched(this._onUrlMatched, this);
       oRouter.getRoute("detailDetail").attachMatched(this._onUrlMatched, this);
       // 确保路由初始化在监听器注册之后
       oRouter.initialize();
   },
   
   _onUrlMatched: function(oEvent) {
       const oParameters = oEvent.getParameter("arguments");
       // 将参数传递给对应控制器处理
       const oDetailController = this.getRootControl().byId("detailView").getController();
       oDetailController.handleUrlParams(oParameters);
   }
   

2. 在控制器中手动触发路由匹配检查
   如果必须在控制器中绑定监听器，可在onInit末尾手动调用一次路由匹配逻辑，确保参数被解析：

   onInit: function() {
       console.log("onInit() DetailController");
       this.oRouter = this.getOwnerComponent().getRouter();
       // 绑定监听器
       this.oRouter.getRoute("list").attachMatched(this._onUrlMatched, this);
       this.oRouter.getRoute("detail").attachMatched(this._onUrlMatched, this);
       this.oRouter.getRoute("detailDetail").attachMatched(this._onUrlMatched, this);
       
       // 手动触发当前路由的参数解析
       const oHashArgs = this.oRouter.getHashChanger().getHashArguments();
       this._onUrlMatched({
           getParameter: function(sKey) {
               return sKey === "arguments" ? oHashArgs : null;
           }
       });
   }
   

3. 检查greedy属性是否引发冲突
   你的路由设置了"greedy": true，该属性会让路由优先匹配更长的模式，但如果存在其他路由模式冲突，可能导致刷新时路由匹配异常。可暂时移除该属性测试，确认是否是其导致的问题。

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