UI5中配置routing后this.getRouter()返回undefined问题求助

控制台报错信息：

2022-11-24 20:26:37.980600 Failed to load component for container content. Reason: TypeError: Cannot read properties of undefined (reading 'initialize') - Component.js

问题表现：调用this.getRouter()返回undefined，路由无法完成初始化，无法从project视图导航至flex视图，代码参考UI5 Walkthrough第30步实现。

相关代码 #

Component.js

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
    "use strict";
    return UIComponent.extend("zpractice.Component",{
        metadata: {
             manifest: "json"
        },
        init: function () {
            UIComponent.prototype.init.apply(this, arguments);
            // ...
            this.getRouter().initialize();
        }
    });
});

manifest.json（原错误配置）

{
  "version": "1.12.0",
  "sap.app": {
    "id": "zpractice",
    "type": "application",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "rootView": {
      "viewName": "zpractice.view.project",
      "type": "XML",
      "id": "myApp",
      "async": true
    },
    "dependencies": {
      "minUI5Version": "1.93",
      "libs": {
        "sap.ui.core": {},
        "sap.ui.layout": {},
        "sap.m": {},
        "sap.f": {}
      },
      "routing": {
        "config": {
          "routerClass": "sap.m.routing.Router",
          "type": "View",
          "viewType": "XML",
          "path": "zpractice.view.",
          "controlId": "myApp",
          "controlAggregation": "pages",
          "async": true
        },
        "routes": [
          {
            "pattern": "",
            "name": "project",
            "target": "project"
          },
          {
            "pattern": "flex",
            "name": "flex",
            "target": "flex"
          }
        ],
        "targets": {
          "project": {
            "id": "project",
            "name": "project"
          },
          "flex": {
            "id": "flex",
            "name": "flex"
          }
        }
      }
    }
  }
}

问题原因 #

路由配置routing被错误嵌套在sap.ui5.dependencies节点下，UI5框架只会读取sap.ui5根节点下的routing配置，因此组件无法识别路由规则，导致this.getRouter()返回undefined，调用initialize()时触发报错。

修复方案 #

1. 调整路由配置位置：将routing节点从sap.ui5.dependencies中移出，放到sap.ui5根节点下，与rootView、dependencies同级。
2. 规范路径配置：将config.path末尾的多余点去掉，改为"zpractice.view"。
3. 验证根视图类型：确保根视图myApp是sap.m.App或sap.m.SplitApp这类支持pages聚合的控件，否则路由无法正确挂载视图。

修复后的manifest.json

{
  "version": "1.12.0",
  "sap.app": {
    "id": "zpractice",
    "type": "application",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "rootView": {
      "viewName": "zpractice.view.project",
      "type": "XML",
      "id": "myApp",
      "async": true
    },
    "dependencies": {
      "minUI5Version": "1.93",
      "libs": {
        "sap.ui.core": {},
        "sap.ui.layout": {},
        "sap.m": {},
        "sap.f": {}
      }
    },
    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "type": "View",
        "viewType": "XML",
        "path": "zpractice.view",
        "controlId": "myApp",
        "controlAggregation": "pages",
        "async": true
      },
      "routes": [
        {
          "pattern": "",
          "name": "project",
          "target": "project"
        },
        {
          "pattern": "flex",
          "name": "flex",
          "target": "flex"
        }
      ],
      "targets": {
        "project": {
          "id": "project",
          "name": "project"
        },
        "flex": {
          "id": "flex",
          "name": "flex"
        }
      }
    }
  }
}

额外检查 #

• 确认Component.js中已正确调用UIComponent.prototype.init.apply(this, arguments)，这是路由初始化的前提。
• 导航时使用正确的路由名称，比如在视图中调用this.getOwnerComponent().getRouter().navTo("flex")。

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