SAP UI5應(yīng)用里的頁面路由怎么處理

本篇內(nèi)容主要講解“SAP UI5應(yīng)用里的頁面路由怎么處理”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“SAP UI5應(yīng)用里的頁面路由怎么處理”吧!

選擇SAP UI5應(yīng)用的webapp文件夾，右鍵，選擇New->SAP UI5 View, 新建一個UI5視圖：

視圖名稱改成app：

在manifest.json文件里編輯route區(qū)域，將默認(rèn)的route重命名為home，清空Pattern字段，

路由的目標(biāo)，設(shè)置成我們UI5應(yīng)用里的另一個視圖View1：

將我們剛才新建的視圖設(shè)置成這個應(yīng)用的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="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文件里，新建一條路由規(guī)則：

pattern：detail/{productId}

路由目標(biāo)為Detail view，視圖level為2：

運(yùn)行時測試，我點(diǎn)了某個列表行項(xiàng)目之后：

跳轉(zhuǎn)到明細(xì)頁面：

到此，相信大家對“SAP UI5應(yīng)用里的頁面路由怎么處理”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！