選擇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：

運行時測試，我點了某個列表行項目之后：

跳轉到明細頁面：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的SAP UI5应用里的页面路由处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。