實際上我們的頁面是會有多個的，并且可以在多個頁面之間跳轉，這節課就學習如何在不同頁面之間實現跳轉。
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

這樣就實現了一個頁面之間的跳轉。