Routes

Each route defines a name, a pattern, and optionally one or more targets to which to navigate when the route has been matched. In the routes section, you define which patterns are available for navigation.

Targets and routes should match view file to easily track the flow of the navigation (1).

Targets

A target defines the view or component that is displayed. It is associated with one or more routes or it can be displayed manually from within the app. Whenever a target is displayed, the corresponding view or component is loaded and added to the aggregation configured with the controlAggregation option of the control.

Route names should be descriptive by itself. Prefer plural form for routes if applicable (2).

Config

The config section contains the global router configuration and default values that apply for all routes and targets. Provide the following as minimal settings for targets:

• routerClass: Either sap.ui.core.routing.Router or sap.m.routing.Router (recommended)

  Compared to sap.ui.core.routing.Router, the sap.m.routing.Router is optimized for mobile apps and adds the properties viewLevel, transition, and transitionParameters which can be specified for each route or target created by the sap.m.routing.Router. The transitionParameters can also be used for custom transitions.

• bypassed: Fail safe target for unmatched routes.

• async: Defines whether targets are loaded asynchronously. The default value is false. We recommend setting this parameter to true to improve performance (3).

Example Manifest

{
  "_version": "1.12.0",
  "sap.app": {...},
  "sap.ui": {...},
  "sap.ui5": {
    "rootView": {
      "viewName": "dsag.example.view.App",
      "type": "XML",
      "async": true,
      "id": "app"
    },
    "dependencies": {...},
    "models": {...},
    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "viewPath": "dsag.example.view",
        "controlId": "app",
        "controlAggregation": "pages",
        "transition": "slide",
        "async": true,
        "bypassed": {
            "target": "notFound"
         },
      },
      "routes": [
        {
          "pattern": "",
          "name": "appHome",
          "target": "home"
        }, {
          "pattern": "employee",
          "name": "employee",
          "target": "employee"
        }
      ],
      "targets": {
        "home": {
          "viewId": "home",
          "viewName": "Home",
          "viewLevel": 1
        },
        "employee": {
          "viewId": "employee",
          "viewName": "Employee",
          "viewLevel": 2,
          "transition": "flip"
        },
        "notFound": {
          "viewId": "notFound",
           "viewName": "NotFound",
           "transition": "show"
         }
      }
    }
  }
}

References

(1) SAP Help: Routing Configuration
(2) UI5 Doc: Routing Configuration
(3) UI5 Doc: Enable Routing