实际上我们的页面是会有多个的，并且可以在多个页面之间跳转，这节课就学习如何在不同页面之间实现跳转。
1.修改配置文件manifest.json，加入routing，包含三个部分，config,routes,targets;

config ：
routerClass：指明用哪个class做router，我们使用sap.m.routing.Router即可；
type：固定为view
viewType：指明view的种类，我们都是用xml
controlId：router对应的view里的控件的id
routes：
每个路由都有一个名称name,模式pattern(url部分)，以及一个或多个目标target；
targets：
每个目标定义一个视图，甚至是一个组件。它与一个或多个路由关联。

	{"_version": "1.65.0","sap.app": {"id": "ui5.walkthrough","i18n": "i18n/i18n.properties","title": "{{appTitle}}","description": "{{appDescription}}","type": "application","applicationVersion": {"version": "1.0.0"}, "dataSources": {"invoiceRemote": {"uri": "V2/Northwind/Northwind.svc/","type": "OData","settings": {"odataVersion": "2.0"}}}},"sap.ui": {"technology": "UI5","deviceTypes": {"desktop": true,"tablet": true,"phone": true}},"sap.ui5": {"dependencies": {"minUI5Version": "1.108.0","libs": {"sap.ui.core": {},"sap.m": {}}},"models": {"i18n": {"type": "sap.ui.model.resource.ResourceModel","settings": {"bundleName": "ui5.walkthrough.i18n.i18n","supportedLocales": [""],"fallbackLocale": ""}},"invoice": {"dataSource": "invoiceRemote"}},"rootView": {"viewName": "ui5.walkthrough.view.App","type": "XML","id": "app"},"resources": {"css": [{"uri": "css/style.css"}]},"routing": {"config": {"routerClass": "sap.m.routing.Router","type": "View","viewType": "XML","path": "ui5.walkthrough.view","controlId": "app","controlAggregation": "pages"},"routes": [{"pattern": "","name": "overview","target": "overview"},{"pattern": "detail","name": "detail","target": "detail"}],"targets": {"overview": {"id": "overview","name": "Overview"},"detail": {"id": "detail","name": "Detail"}}}}}

2.修改Component.js，在init() 方法初始化路由，这里不需要实例化路由，路由会根据我们的配置自动实例化并分配给组件；

sap.ui.define(["sap/ui/core/UIComponent","sap/ui/model/json/JSONModel"
], (UIComponent, JSONModel) => {"use strict";return UIComponent.extend("ui5.walkthrough.Component", {metadata: {interfaces: ["sap.ui.core.IAsyncContentCreation"],manifest: "json"},init() {// call the init function of the parentUIComponent.prototype.init.apply(this, arguments);// set data modelconst oData = {recipient: {name: "World"}};const oModel = new JSONModel(oData);this.setModel(oModel);// create the views based on the url/hashthis.getRouter().initialize();}});
});

3.新加一个页面Overview.view.xml，嵌入之前课程做的两个视图

<mvc:ViewcontrollerName="ui5.walkthrough.controller.App"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"displayBlock="true"><Page title="{i18n>homePageTitle}"><content><mvc:XMLView viewName="ui5.walkthrough.view.HelloPanel" /><mvc:XMLView viewName="ui5.walkthrough.view.InvoiceList" /></content></Page>
</mvc:View>

4.然后修改App.view，仅保留id属性，这里id属性赋值为app,就是之前路由配置的controlid.

<mvc:ViewcontrollerName="ui5.walkthrough.controller.App"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"displayBlock="true"><Shell><Appclass="myAppDemoWT"id="app"/></Shell>
</mvc:View>

5.修改view InvoiceList.view.xml，加入type=“Navigation” 导航press=“.onPress” 点击事件

<mvc:ViewcontrollerName="ui5.walkthrough.controller.InvoiceList"xmlns="sap.m"xmlns:core="sap.ui.core"xmlns:mvc="sap.ui.core.mvc">...<items><ObjectListItemcore:require="{Currency: 'sap/ui/model/type/Currency'}"title="{invoice>Quantity} x {invoice>ProductName}"number="{parts: ['invoice>ExtendedPrice','view>/currency'],type: 'Currency',formatOptions: {showMeasure: false}}"numberUnit="{view>/currency}"numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"type="Navigation"press=".onPress" ><firstStatus><ObjectStatuscore:require="{Formatter: 'ui5/walkthrough/model/formatter'}"text="{path: 'invoice>Status',formatter: 'Formatter.statusText.bind($controller)'}"/></firstStatus></ObjectListItem></items></List>
</mvc:View>

6.修改InvoiceList.controller.js，加入onPress() 方法，通过getOwnerComponent().getRouter()访问路由实例，然后navTo(“detail”)跳转到detail页面，detail这个参数就是manifest.json配置文件routes的pattern，然后根据pattern对应的name去targets里面找id，根据id对应的name去找webapp/view找页面

sap.ui.define(["sap/ui/core/mvc/Controller","sap/ui/model/json/JSONModel","sap/ui/model/Filter","sap/ui/model/FilterOperator"
], (Controller, JSONModel, Filter, FilterOperator) => {"use strict";return Controller.extend("ui5.walkthrough.controller.InvoiceList", { onInit() {const oViewModel = new JSONModel({currency: "EUR"});this.getView().setModel(oViewModel, "view");},onFilterInvoices(oEvent) {// build filter arrayconst aFilter = [];const sQuery = oEvent.getParameter("query");if (sQuery) {aFilter.push(new Filter("ProductName", FilterOperator.Contains, sQuery));}// filter bindingconst oList = this.byId("invoiceList");const oBinding = oList.getBinding("items");oBinding.filter(aFilter);},onPress() {const oRouter = this.getOwnerComponent().getRouter();oRouter.navTo("detail");}});
});

7.新建页面Detail.view.xml

<mvc:Viewxmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"><Pagetitle="{i18n>detailPageTitle}"><ObjectHeader title="Invoice"/></Page>
</mvc:View>

最后在i18n加一个新的字符串

# Detail Page
detailPageTitle=Walkthrough - Details

这样就实现了一个页面之间的跳转。