view - 路由器导航后未呈现 SAPUI5/OpenUI5 View

Question

我正在创建带有简单路由的 SAPUI5 示例应用程序 (SAPUI5/OpenUI5 v.1.22)。

我试图理解的主要问题是，为什么 URL 模式会发生变化以及 onInit的目标 View Controller 被触发，但在没有任何 react 之后(onAfterRendering 没有被触发)，并且只有在页面重新加载后我才能转到另一个页面。

路由设置。初始化路由器的 Compontent.js 结构如下:

sap.ui.define([
    "sap/ui/core/UIComponent"
], function (UIComponent) {

    return UIComponent.extend("sge.apps.app.Component", {

        metadata:{
            name : "Sample App",
            version : "1.0",
            includes : [],
            dependencies : {
                libs : ["sap.m", "sap.ui.layout"],
                components : []
            },

            rootView: "sge.apps.app.view.App",

            config: {
                resourceBundle: "i18n/i18n.properties"
            },

            routing : {
                config : {
                    routerClass : sap.ui.core.routing.Router,
                    viewType : "XML",
                    viewPath : "sge.apps.app.view",
                    targetControl: "app",
                    targetAggregation: "pages",
                    transition: "slide",
                    clearTarget : false,
                    bypassed: {
                        target: "notFound"
                    }
                },
                routes: [{
                    pattern: "",
                    name: "appHome",
                    view: "Home"
                },{
                    pattern : ":all*:",
                    name : "catchallDetail",
                    view : "NotFound",
                    transition : "show"
                },{
                    pattern: "notFound",
                    name: "appNotFound",
                    view: "NotFound",
                    transition : "show"
                }]
            }
        },

        init : function() {
            UIComponent.prototype.init.apply(this, arguments);

            var mConfig = this.getMetadata().getConfig();

            // always use absolute paths relative to our own component
            // (relative paths will fail if running in the Fiori Launchpad)
            var rootPath = jQuery.sap.getModulePath("sge.apps.app");

            // set i18n model
            var i18nModel = new sap.ui.model.resource.ResourceModel({
                bundleUrl : [rootPath, mConfig.resourceBundle].join("/")
            });
            this.setModel(i18nModel, "i18n");

            // set device model
            var deviceModel = new sap.ui.model.json.JSONModel({
                isTouch : sap.ui.Device.support.touch,
                isNoTouch : !sap.ui.Device.support.touch,
                isPhone : sap.ui.Device.system.phone,
                isNoPhone : !sap.ui.Device.system.phone,
                listMode : sap.ui.Device.system.phone ? "None" : "SingleSelectMaster",
                listItemType : sap.ui.Device.system.phone ? "Active" : "Inactive"
            });
            deviceModel.setDefaultBindingMode("OneWay");
            this.setModel(deviceModel, "device");

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

我有 Home.view.xml 的 Home.controller.js，我尝试通过按下带有事件 onDisplayNotFound 的按钮导航到另一个 View 。 :

sap.ui.define([
    "sge/apps/app/controller/BaseController"
], function (BaseController) {
    "use strict";

    return BaseController.extend("sge.apps.app.controller.Home", {
        onDisplayNotFound : function (oEvent) {
            this.getRouter().navTo("appNotFound");
        }
    });
});

基础 Controller .js

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

    return Controller.extend("sge.apps.app.controller.BaseController", {        
        getRouter: function () {
            return sap.ui.core.UIComponent.getRouterFor(this);
        },
        onNavBack: function (oEvent) {
            var oHistory, sPreviousHash;

            oHistory = History.getInstance();
            sPreviousHash = oHistory.getPreviousHash();

            if(sPreviousHash !== undefined) {
                window.history.go(-1);
            } else {
                this.getRouter().navTo("appHome", {}, true /*no history*/);
            }
        }
    });
});

目标 View NotFound.view.xml 的 NotFound.controller.js:

sap.ui.define([
    "sge/apps/app/controller/BaseController"
], function (BaseController) {
    "use strict";

    return BaseController.extend("sge.apps.app.controller.NotFound", {
        onInit: function () {
            console.log("onInit NotFound.view.xml");
        },
        onAfterRendering: function () {
            console.log("onAfterRendering NotFound.view.xml");
        }
    });
});

Answer 1

我遇到了同样的问题，我通过在路由配置中添加这一行来解决:

    "routerClass" : "sap.m.routing.Router",

它已经完美地导航。

"routing": {
        "config": {
            "routerClass" : "sap.m.routing.Router", 
            "viewPath": "es.seidor.view",
            "controlId": "App",
            "async" : "true",
            "clearTarget" : "true"
        }