本篇内容主要讲解“SAP UI5应用里的页面路由怎么处理”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“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="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：
运行时测试，我点了某个列表行项目之后：
跳转到明细页面：
到此，相信大家对“SAP UI5应用里的页面路由怎么处理”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：http://blog.itpub.net/24475491/viewspace-2677578/
