首页 > 解决方案 > Web IDE SAPUI5 XML 视图之间的路由不起作用?

问题描述

我遵循了有关 saps 学习中心的指南并使用了教程,但我仍然无法使路由工作。我想知道 Web IDE 的安装是否有问题?

组件.js 文件

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "com/s5/mal/routingRouting/model/models"
], function(UIComponent, Device, models) {
    "use strict";

    return UIComponent.extend("com.s5.mal.routingRouting.Component", {

        metadata: {
            manifest: "json"
        },

        init: function() {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);

            // set the device model
            this.setModel(models.createDeviceModel(), "device");

            this.getRouter().initialize();
        }
    });
});

main.view.xml 文件

<mvc:View controllerName="com.s5.mal.routingRouting.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true" xmlns="sap.m">
    <App id="idApp" />
</mvc:View>

view1.view.xml

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="com.s5.mal.routingRouting.controller.View1"
    xmlns:html="http://www.w3.org/1999/xhtml">

    <Page title="Title">
        <content>
            <Text text="View1" />
            <Button text="Next View" press="onPress" /> 
        </content>
    </Page>

</mvc:View>

view1.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
    "use strict";

    return Controller.extend("com.s5.mal.routingRouting.controller.View1", {

        getRouter: function(){
            return sap.ui.core.UIComponent.getRouterFor(this);
        },
        onPress: function (oEvent){
            this.getRouter().navTo("View2");
        }
    });
});

清单.json

       "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewPath": "com.s5.mal.routingRouting.view",
                "controlId": "idApp",
                "viewType": "XML",
                "controlAggregation": "pages",
                "transition": "slide"
            },
            "routes": [{
                "name": "View1",
                "pattern": "",
                "titleTarget": "",
                "greedy": false,
                "target": ["View1"]
            }, {
                "name": "View2",
                "pattern": "",
                "titleTarget": "",
                "greedy": false,
                "target": ["View2"]
            }, {
                "name": "notFound",
                "pattern": "",
                "titleTarget": "",
                "greedy": false,
                "target": ["notFound"]
            }],
            "targets": {
                "View1": {
                    "viewId": "View1", 
                    "viewType": "XML",
                    "transition": "slide",
                    "clearAggregation": true,
                    "viewName": "View1",
                    "viewLevel": 1
                },
                "View2": {
                    "viewId": "View2",
                    "viewType": "XML",
                    "transition": "slide",
                    "clearAggregation": true,
                    "viewName": "View2",
                    "viewLevel": 2
                },
                "notFound": {
                    "viewType": "XML",
                    "transition": "slide",
                    "clearAggregation": true,
                    "viewName": "NotFound"
                }
            }
        }

即使当我尝试其他教程时,我似乎也无法找出问题所在,但最终却一无所获。当我按下我的按钮时,我没有得到任何回应。就像它从不运行一样,当我调试它时,它正在通过我的“onPress”按钮运行,并且控制台日志上没有错误。

我只是想让路由工作,我还没有做到这一点。

标签: javascriptsapui5

解决方案


您所有的路线都有空模式。如果你导航到路由“view2”,它的模式被添加到 url 中的#,然后路由检查,哪个路由匹配模式 => 并找到“view1”</p>

将 view1 模式留空,将模式添加到您的其他路线。


推荐阅读