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

選擇SAP UI5應用的webapp資料夾，右鍵，選擇New->SAP UI5 View, 新建一個UI5檢視：

檢視名稱改成app：

在manifest.json檔案裡編輯route區域，將預設的route重新命名為home，清空Pattern欄位，

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

將我們剛才新建的檢視設定成這個應用的root view：

```JavaScript

var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

var selectedProductId = oEvent.getSource().getBindingContext().getProperty("ProductID");

oRouter.navTo("Detail", {

productId: selectedProductId

});

```

新建一個Detail view：

原始碼：

```xml

<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="
	<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：

執行時測試，我點了某個列表行專案之後：

跳轉到明細頁面：