UI5应用路由匹配但导航视图未显示问题求助

开发支持视图导航的UI5应用时，初始视图可正常加载，但导航后的目标视图无法显示。控制台日志显示路由已匹配，目标视图已被放入App控件的pages聚合中，但页面仍未展示。

根视图代码 #

<mvc:View
    displayBlock="true"
    height="100%"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:core="sap.ui.core"
    xmlns="sap.m">
    <App id="App">
    </App>
</mvc:View>

初始/Home视图代码 #

<mvc:View
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:layout="sap.ui.layout"
  xmlns:core="sap.ui.core"
  controllerName="sap.ui.demo.todo.controller.App"
>
<Page title="My Task Application" id="taskPage" >
  <Table id="idTasksTable"
        inset="false"
        items="{
            path: '/tasks',
            sorter: {
                path: 'Name'
            }
        }">
        <headerToolbar>
            <OverflowToolbar>
                <content>
                    <Title text="Tasks" level="H2"/>
                    <ToolbarSpacer />
                    <ComboBox id="idPopinLayout"
                        placeholder="Popin layout options"
                        change="onPopinLayoutChanged">
                        <items>
                            <core:Item  text="Block"
                                key="Block"/>
                            <core:Item  text="Grid Large"
                                key="GridLarge"/>
                            <core:Item  text="Grid Small"
                                key="GridSmall"/>
                        </items>
                    </ComboBox>
                    <Label text="Sticky options:" />
                    <Button text="Add"
                        press="onAdd"/>
                    <Button text="Edit"
                        press="onAdd"/>
                    <Button text="Delete"
                        press="onDelete"/>
                </content>
            </OverflowToolbar>
        </headerToolbar>
        <infoToolbar>
            <OverflowToolbar>
                <Label text="List of Tasks"/>
            </OverflowToolbar>
        </infoToolbar>
        <columns>
            <Column
                width="12em">
                <Text text="Task Name" />
            </Column>
            <Column
                minScreenWidth="Tablet"
                demandPopin="true">
                <Text text="Task Status" />
            </Column>
        </columns>
        <items>
            <ColumnListItem vAlign="Middle">
                <cells>
                    <ObjectIdentifier
                        title="{taskName}"
                        />
                    <Text
                        text="{status}" />
                </cells>
            </ColumnListItem>
        </items>
    </Table>
</Page>
</mvc:View>

导航目标视图代码 #

<mvc:View
 xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:core="sap.ui.core"
 >
  <Page id="nextPage"
    class="sapUiResponsiveContentPadding"
    showNavButton="true"
    title="Navigated View"
  >
    <layout:VerticalLayout xmlns:layout="sap.ui.layout" width="100%">
      <Text text="↑ Nav back"/>
    </layout:VerticalLayout>
  </Page>
</mvc:View>

manifest.json配置 #

{
    "_version": "1.12.0",
    "sap.app": {
        "id": "sap.ui.demo.todo",
        "type": "application"
    },
    "sap.ui5": {
        "dependencies": {
            "minUI5Version": "1.75.0",
            "libs": {
                "sap.ui.core": {},
                "sap.m": {},
                "sap.f": {}
            }
        },
        "rootView": {
            "viewName": "sap.ui.demo.todo.view.App",
            "type": "XML",
            "async": true,
            "id": "App"
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "sap.ui.demo.todo.i18n.i18n",
                    "supportedLocales": ["en", "de"],
                    "fallbackLocale": "en"
                }
            }
        },
        "resources": {
            "css": [
                {
                    "uri": "css/styles.css"
                }
            ]
        },
        "routing": {
            "config": {
                "async": true,
                "viewType": "XML",
                "path": "sap.ui.demo.todo.view",
                "clearTarget": false,
                "bypassed": {
                    "target": "notFound"
                },
                "controlId": "App",
                "controlAggregation": "pages"
            },
            "routes": [
                {
                    "pattern": "",
                    "name": "home",
                    "target": "home"
                },
                {
                    "pattern": "addView",
                    "name": "addView",
                    "target": "addView"
                }
            ],
            "targets": {
                "home": {
                    "type": "View",
                    "name": "Home",
                    "level": 1
                },
                "addView": {
                    "type": "View",
                    "name": "AddTask",
                    "level": 2
                }
            }
        }
    }
}

导航事件处理代码 #

onAdd: function () {
    this.getOwnerComponent().getRouter().navTo("addView");
}

1. ID冲突问题 #

根视图（mvc:View）的id被设置为"App"，同时根视图内部的sap.m.App控件也使用了id="App"，违反了UI5中ID必须唯一的规则。路由配置里的controlId: "App"会指向根视图而非内部的sap.m.App控件，导致视图被错误添加到无pages聚合的根视图中。

修复步骤：

• 修改根视图中sap.m.App的id为唯一值，比如"appContainer"：

<App id="appContainer">
</App>

• 更新manifest.json路由配置中的controlId为"appContainer"：

"routing": {
    "config": {
        // ...其他配置
        "controlId": "appContainer",
        "controlAggregation": "pages"
    },
    // ...其他路由配置
}

2. 目标视图命名空间缺失问题 #

目标视图中使用了<layout:VerticalLayout>控件，但视图标签未声明对应的命名空间xmlns:layout="sap.ui.layout"，导致XML解析失败，视图无法正常渲染。

修复步骤：
在目标视图的mvc:View标签中添加命名空间声明：

<mvc:View
 xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:core="sap.ui.core"
  xmlns:layout="sap.ui.layout"
 >
 <!-- 视图内容 -->
</mvc:View>

完成以上两处修改后，导航后的目标视图即可正常显示。

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