Sapui5 如何在ui5中使用路由创建具有不同容器的页面

我正在尝试使用ui5中的路由创建splitapp应用程序。我的第一个页面是登录页面。那么下一页应该是一个splitapp，这是我无法做到的

我无法使用路由从登录页面导航到splitapp。我的路由url正在更改，但splitapp视图未加载

enter code here
// component.js

jQuery.sap.declare("sap.demo.cart.Component");

sap.ui.core.UIComponent.extend("sap.demo.cart.Component",{
    metadata:{
        routing:{
            config:{
                viewType:"JS",
                viewPath:"shopcart",
                targetAggregation:"pages",
                clearTarget:false
            },
            routes:[
                    {
                        pattern: "",
                        name: "login",
                        view: "login",
                        viewType:"JS",
                        viewPath:"shopcart",
                        targetControl:"topMaster"
                    },
                    {
                        pattern: "splitApp",
                        name:"app",
                        view:"app",
                        targetControl:"topMaster",
                        clearTarget:false,

                        subroutes:[{
                            pattern: "master",
                            name:"master",
                            view:"master",

                            targetAggregation:"masterPages",
                            targetControl:"splitApp"
                            preservePageInSplitContainer:true
                            subroutes:[{
                                pattern:"welcome",
                                name:"welcome",
                                view:"welcome",
                                targetAggregation:"detailPages"
                            }]

                        }]
                    }
                    ]
        }
    },

    init: function(){
            jQuery.sap.require("sap.ui.core.routing.HashChanger");
            jQuery.sap.require("sap.m.routing.RouteMatchedHandler");

            sap.ui.core.UIComponent.prototype.init.apply(this,arguments);
            this._router = this.getRouter();
            this._routerHandler = new  sap.m.routing.RouteMatchedHandler(this._router);
            this._router.initialize();

    },
    createContent:function(){
        var oView = sap.ui.view({
            id:"tmaster",
            viewName:"shopcart.topMaster",
            type:"JS",
            viewData:{component: this}

        });
        return oView;
 }
    });

/*login.view*/

 sap.ui.jsview("shopcart.login", {

 getControllerName : function() {
    return "shopcart.login";
},

 createContent : function(oController) {
    var opanel = new sap.m.Panel(
            {
                width:"100%",
                height:"100%",
                expandable : false,
                expanded: true,
                content:[
                    new sap.m.Panel("ologin",{
                        headerText:"Login",
                        width:"400px",
                        height:"300px",
                        content:[       
                                        new sap.m.Input("uname",{ tooltip:"Enter Username",placeholder : "Username"}),
                                        new sap.m.Input("pwd",{ type: sap.m.InputType.Password,placeholder : "Password"}),
                                        new sap.m.Link("fgt",{text:"Forgot Password?", press:oController.onForgot}),
                                        new sap.m.Button("log",{text:"Login", press:[oController.onLogin, oController]}),
                                        new sap.m.Button("clr",{text:"Clear", press:oController.onClear})
                                 ]
                    })
                 ]
    }).addStyleClass("logContainer");
    return sap.m.Page({
        content:[opanel]
    });
}

})

})

})

})

})

---

})

看看这段代码。注意TopMaster控制器和组件中的路由配置

jQuery.sap.requiresap.m.MessageBox； jQuery.sap.declareshopcart.Component； sap.ui.core.UIComponent.extend 购物车。组件， { 元数据：{ 根视图：{ viewName:shopcart.view.TopMaster， 类型：sap.ui.core.mvc.ViewType.JS }, 路由：{ 配置：{ 视图类型：JS， viewPath:shopcart.view， 目标控制：topMaster， 目标集合：页， clearTarget:错误 }, 路线：[ { 图案：， 名称：登录， 查看：登录 }, { 模式：splitApp， 名称:app,， 查看：应用程序， 子例程：[ { 图案：大师， 姓名:师父,， 视图：Master， 目标聚合：母版页， targetControl:splitApp， preservePageInSplitContainer:对， 子例程：[ { 模式：欢迎， 姓名：欢迎， 观点：欢迎， targetControl:splitApp， targetAggregation:详细信息页面 } ] } ] } ] } }, init：函数{ sap.ui.core.UIComponent.prototype.init.apply 这 论据 ; var oRouter=this.getRouter； oRouter.initialize； } } ; // sap.ui.jsview shopcart.view.TopMaster， { getControllerName:函数{ 返回shopcart.controller.TopMaster； }, createContent:functionoController{ 返回新的sap.m.App 顶级大师 ; } } ; // sap.ui.controller shopcart.controller.TopMaster， { onInit：函数{ var oRouter=sap.ui.core.UIComponent.getRouterForthis； oRouter.AttacherRoute匹配此路径匹配，此路径匹配； }, onRouteMatched:functionoEvent{ var oParameters=oEvent.getParameters； var oView=this.getView； var oApp=sap.ui.getCore.byIdtopMaster； 如果oApp.getCurrentPage.sId！==opParameters.view.sId{ oApp.tooParameters.view.sId； } } } ; // sap.ui.jsview shopcart.view.Login， { getControllerName:函数{ 返回shopcart.controller.Login； }, createContent:functionoController{ 返回新的sap.m.Page { 标题：登录， 内容：[ 新sap.m.面板 { 宽度：100%， 身高：100%， 可扩展：false， 对,， 内容：[ 新sap.m.面板 奥林， { headerText:登录， 宽度：400px， 高度：300px， 内容：[ 新sap.m.Input 这个.createIduname， { 工具提示：输入用户名， 占位符：用户名 } , 新sap.m.Input 这个.createIdpwd， { 类型：sap.m.InputType.Password， 占位符：密码 } , 新sap.m.Link 这个.createIdfgt， { 文本：忘记密码了吗？， 按：oController.on } , 新sap.m.按钮 这个.createIdlog， { 文本：登录， 新闻界：[ oController.onLogin， O控制器 ] } , 新sap.m.按钮 这个.createIdclr， { 文本：清晰， 按：oController.onClear } ] } ] } .addStyleClasslogContainer ] } ; } } ; // sap.ui.controller shopcart.controller.Login， { onInit：函数{ }, onLogin：函数{ var oView=this.getView； var sUsername=oView.byIduname.getValue； var sPassword=oView.byIdpwd.getValue； 如果sUsername==| | sPassword=={ sap.m.MessageBox.alert 请提供您的登录详细信息， { 标题：错误 } ; } 否则{ var oRouter=sap.ui.core.UIComponent.getRouterForthis； oRouter.navTowelcome； } }, onClear：函数{ var oView=this.getView； oView.byIduname.setValuenull； oView.byIdpwd.setValuenull； }, 功能{ sap.m.MessageBox.alert 目前仍在建设中,， { 标题：错误 } ; } } ; // sap.ui.jsview shopcart.view.App， { getControllerName:函数{ 返回shopcart.controller.App； }, createContent:functionoController{ 此.setDisplayBlocktrue； 返回新的sap.m.SplitApp splitApp ; } } ; // sap.ui.controller shopcart.controller.App， { onInit：函数{ } } ; // sap.ui.jsview shopcart.view.Master， { getControllerName:函数{ 返回shopcart.controller.Master； }, createContent:functionoController{ 返回新的sap.m.List { 模式：sap.m.ListMode.SingleSelect， 项目：[ 新sap.m.StandardListItem { 职务：员工主管 } , 新sap.m.StandardListItem { 标题：产品大师 } , 新sap.m.StandardListItem { 标题：类别主管 } , 新sap.m.StandardListItem { 标题：订单主 } , 新sap.m.StandardListItem { 山雀 乐：操作大师 } ] } ; } } ; // sap.ui.controller shopcart.controller.Master， { onInit：函数{ } } ; // sap.ui.jsview shopcart.view.Welcome， { getControllerName:函数{ 返回shopcart.controller.Welcome； }, createContent:functionoController{ 返回新的sap.m.Text { 文本：欢迎使用Oncall支持维护Fiori应用程序 } ; } } ; // sap.ui.controller shopcart.controller.Welcome， { onInit：函数{ } } ;

---

只需在index.html中添加**行，这样您就可以从index.html重定向到另一个视图

那么，您认为我们可以如何帮助您而不向我们显示任何代码呢-添加代码以获得适当的帮助对不起，伙计们。。我现在已经添加了代码。。现在，我可以导航到应用程序视图页面，在该页面中加载splitapp容器。。但无法向其中添加母版页和详细信息页。。请检查并帮助我解决这个问题。嗨，塞巴斯蒂安，它起作用了。非常感谢！！。。最后一件事，我想知道我哪里出错了，这个路由是如何工作的。。我是第一次使用路由，所以。。如果你能解释一下，那会很有帮助的

 /*login controller*/
sap.ui.controller("shopcart.login", {


onInit: function() {
    this.router = sap.ui.core.UIComponent.getRouterFor(this);
},

onLogin: function(){
    var uname = sap.ui.getCore().byId("uname").getValue();
    var pwd = sap.ui.getCore().byId("pwd").getValue();
    if(uname=="" || pwd=="")
        {
//              openDialog(sap.ui.core.ValueState.Error,"Login Details","Please provide both the username and password details to login");
        }
    else{
//          app.to("idhome2");
        this.router.navTo("app");       
    }
},
onClear:function(){
    sap.ui.getCore().byId("uname").setValue("");
    sap.ui.getCore().byId("pwd").setValue("");
},
onForgot:function(){
    openDialog(sap.ui.core.ValueState.None,"Forgot Password","Resetting is still under construction");
}

/*topmaster.view*/
sap.ui.jsview("shopcart.topMaster", {
createContent : function(oController) {
    return new sap.m.App("topMaster",{
    });
}

/*app.view*/
sap.ui.jsview("shopcart.app", {
getControllerName : function() {
    return "shopcart.app";
},
createContent : function(oController) {
    this.setDisplayBlock(true);
    return new sap.m.SplitApp("splitApp");
}

/*master.view*/
sap.ui.jsview("shopcart.master", { 
getControllerName : function() {
    return "shopcart.master";
},
createContent : function(oController) {
    var olist = new sap.m.List({
        mode:sap.m.ListMode.SingleSelect,
        items : [ new sap.m.StandardListItem({
              title : "Employee Master"
        }), new sap.m.StandardListItem({
             title : "Product Master"
        }),new sap.m.StandardListItem({
             title : "Category Master"
        }),new sap.m.StandardListItem({
             title : "Order Master"
        }),new sap.m.StandardListItem({
             title : "Operation Master"
        }) ]
    });
    return olist;
}

/*welcome.view */
sap.ui.jsview("shopcart.welcome", {

getControllerName : function() {
    return "shopcart.welcome";
},

createContent : function(oController) {
    return new sap.m.Text({text:"Welcome to Oncall Support Maintenance Fiori Application",design:sap.ui.commons.TextViewDesign.H5});

}

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
        <link href="css/index.css" rel="stylesheet"/>


        <script src="resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.ui.commons"
                data-sap-ui-theme="sap_bluecrystal">
        </script>
        <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

        <script>
            function Login(){
                        **window.location.assign("dashboard.html#/dashboard");**
            }

        </script>

    </head>
    <body class="sapUiBody" role="application">
        <div id="content">
        <div id="content-center-alignment">
        <div class="inner">
        <img alt="" src="">
            <input id="txtUsername" type="text" placeholder="Enter user name"></input>
            <br/>
            <input id="txtPassword" type="password" placeholder="Enter your password"></input>
                        <br/>
            <button id="btnLogin" type="submit" onClick="Login();" class="button">Login</button>
            </div>
        </div>
        </div>
    </body>
</html>