SAPUI5 Walkthrough Step 32: Routing with Parameters

带参数的路由。

（比如我们跳转到详情页时，需要把我们选中的信息传过去，这时就需要带上参数）

修改 webapp/manifest.json 文件，将Routes中，detai的Pattern更改为：detail/{invoicePath}

修改webapp/view/Detail.view.xml 文件

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="sap.ui.demo.walkthrough.controller.Detail">
    <Page title="Walkthrough - Details" showNavButton="true" navButtonPress="onNavButtonPress">
            <ObjectHeader 
                    intro="{invoice>ShipperName}" 
                    title="{invoice>ProductName}"/>
    </Page>
</mvc:View>

修改 webapp/controller/InvoiceList.controller.js 文件，

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "../model/formatter",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator"
], function(Controller, JSONModel, formatter, Filter, FilterOperator) {
    "use strict";

    return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", {
        formatter: formatter,
......

,
        onPress: function(oEvent) {
            var oItem = oEvent.getSource();
            var sPath = window.encodeURIComponent(oItem.getBindingContext("invoice").getPath().substr(1));
            var oRouter = this.getOwnerComponent().getRouter();
            oRouter.navTo("detail", { invoicePath: sPath });        
        }
    });
});

debug时的值如下

修改 webapp/controller/Detail.controller.js 文件，增加onInit的实现，在页面加载时，读取路由中传过来的参数信息。

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
    "use strict";
    return Controller.extend("sap.ui.demo.walkthrough.controller.Detail", {
        onInit: function () {
            var oRouter = this.getOwnerComponent().getRouter();
            oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
        },
        _onObjectMatched: function (oEvent) {
            this.getView().bindElement({
                path: "/" + window.decodeURIComponent(oEvent.getParameter("arguments").invoicePath),
                model: "invoice"
            });
        },
        onNavButtonPress: function(oEvent) {
            var oRouter = this.getOwnerComponent().getRouter();
            oRouter.navTo("overview");
        }
    });
});

执行结果

原文地址：https://www.cnblogs.com/keyuming/p/15123969.html