SAP UI5應用裡的頁面路由處理

選擇SAP UI5應用的webapp檔案夾，右鍵，選擇New->SAP UI5 View, 建立一個UI5視圖：

視圖名稱改成app：

在manifest.json檔案裡編輯route區域，将預設的route重命名為home，清空Pattern字段，

路由的目标，設定成我們UI5應用裡的另一個視圖View1：

将我們剛才建立的視圖設定成這個應用的root view：

var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
    var selectedProductId = oEvent.getSource().getBindingContext().getProperty("ProductID");
    oRouter.navTo("Detail", {
        productId: selectedProductId
    });           

建立一個Detail view：

源代碼：

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="sapcp.cf.tutorial.app.controller.Detail"
    xmlns:html="http://www.w3.org/1999/xhtml">
    <App>
        <pages>
            <Page title="{i18n>DetailTitle}"
          showNavButton="true"
          navButtonPress="handleNavButtonPress" >
        <VBox>
            <Text text="{ProductName}" />
            <Text text="{UnitPrice}" />
            <Text text="{QuantityPerUnit}" />
            <Text text="{UnitsInStock}" />
        </VBox>
    </Page>
        </pages>
    </App>
</mvc:View>           

在manifest.json檔案裡，建立一條路由規則：

pattern：detail/{productId}

路由目标為Detail view，視圖level為2：

運作時測試，我點了某個清單行項目之後：

跳轉到明細頁面：

本文來自雲栖社群合作夥伴“汪子熙”，了解相關資訊可以關注微信公衆号"汪子熙"。