官網連結：https://sapui5.hana.ondemand.com/1.36.6/docs/guide/e5200ee755f344c8aef8efcbab3308fb.html

一個例子：

```json
"routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "viewPath": "kyma.sample.app.view",
        "controlId": "app",
        "controlAggregation": "pages",
        "async": true
      },
      "routes": [
        {
          "pattern": "",
          "name": "orders",
          "target": ["orders"]
        }
      ],
      "targets": {
        "orders": {
          "viewName": "Orders",
          "viewId": "orders",
          "viewLevel": 1,
          "title": "{i18n>title}"
        }
      }
```

![](https://img-blog.csdnimg.cn/img_convert/497b5bef3ce5bee42de8772fd23d5713.png)

在 manifest.json 檔案的 sap.ui5 區域，新增了三個子區域：

(1) config
(2) routes
(3) target

## config

> This section contains the global router configuration and default values that apply for all routes and targets.

包含了全域性路由器資訊和適應於所有路由路徑和目標的預設值。

> We define the router class that we want to use and where our views are located in the app.

定義了路由器實現類以及我們的檢視在應用中的具體位置。

> To load and display views automatically, we also specify which control is used to display the pages and what aggregation should be filled when a new page is displayed.

為了讓檢視能夠顯示出來，需要定義哪個控制元件用於顯示頁面，以及頁面透過何種 aggregation，填充到該控制元件去。

![](https://img-blog.csdnimg.cn/img_convert/66835c920b7183b8c70c618a9026ef56.png)

![](https://img-blog.csdnimg.cn/img_convert/c48135a190cb67b18126e102e242576b.png)

## routes

> Each route defines a name, a pattern, and one or more targets to navigate to when the route has been hit.

每條路由資訊定義了一個名稱，一個格式，以及一個路由目的檢視，當該路由觸發時，目的檢視會顯示。

> The pattern is basically the URL part that matches to the route, we define two routes for our app.

所謂 pattern，即待匹配的 URL 片段。

例子：

![](https://img-blog.csdnimg.cn/img_convert/1d6959e28e8f60dcced39b0b1bd0517e.png)

SAP UI5 Routing 路由介紹

相關文章