Fiori学习笔记

路由导航在前端框架中占据这十分重要的地位。它决定了整个项目的结构、每个页面的跳转方式以及传参等等。
Fiori的路由层级可以支持到二级或三级，并且可以通过 viewLevel 来指定路由层级，从而可以控制跳页时的动画显示效果。

提供路由导航的API： sap.f 和 sap.m, 通常用 sap.m 的多一些。

下图是常见Employee项目的路由导航展示图：

路由设置

• 定义路由的类

"routerClass": "sap.m.routing.Router"

• 路由初始化

this.routeHandler = new sap.m.routing.RouteMatchedHandler(router);this.getRouter().initialize();

• 路由注册

{"pattern": "detail/{name}/{sex}/resume:?query:","name": "app","viewName": "app","targetAggregation": "pages"，"transition": "slide"，"bypassed": {"target": "notFound"}}

targetAggregation ：如果是master-detail模式的APP（split APP），targetAggregation 的值将不再是pages，而要写成 masterPages ，detailPages.

transition：页面的翻转效果，slide（推入推出），flip（翻转）, show（仅显示）

bypassed：default页面，即指定路由都不符合时就会走这里

this.router.getTargets().display("notFound"); //不改变路由的hash，仅仅是呈现定义好的某个target

导航

在 controller 中 onInit 方法里实例化路由

this.router = sap.ui.core.UIComponent.getRouterFor(this);

导航切换页面

this.router.navTo("app", {para: someData});//这里的app是之前设定路由指定的name

路由监听

在controller中监听路由跳转，从第一个页面跳转到第二个页面的过程中，可以在第二个页面中监听由第一个页面传递过来的参数信息

读取路由参数

var  oParameters = oEvent.getParameters();console.log(oParameters.para); //para，定义好的参数名称

Controller代码：第一个页面

goToNextPage: function(oEvent){    this.router.navTo("SecondView", {name: 'myname',sex:'male', query: {pageName : "detail page"}}); // navTo方法里加上true： 通常跳页会保存前一页信息，通过history.back()可以返回上一页，设置成true之后前一页缓存将不会被保存，也不能用history.back()返回上一页}

Controller代码：第二个页面

this.router.getRoute("SecondView").attachMatched(this._onRouteMatched, this);_onRouteMatched: function(oEvent){    var para = oEvent.getParameter("arguments");    var bookMarkPara = para["?query"];    // alert('receive Para Name:'+para.name);    // alert('receive Para sex:'+para.sex);    // alert(bookMarkPara.pageName);}

history返回上一页

sap.ui.define(["sap/ui/core/mvc/Controller","sap/ui/core/routing/History"],function(Controller, History){    return Controller.extend("HelloWorldRouterView.controller.Detail", {        onInit:function(){},        onNavBack: function(oEvent){            var oHistory, sPreviousHash;            oHistory = History.getInstance();            sPreviousHash = oHistory.getPreviousHash();            if (sPreviousHash !== undefined) {                window.history.go(-1);            }        }    });});