Working with Nested Components

If you use nested component definitions in your app, you can connect the routing definition of these components by using a parent-relationship for routes.

To do so, you add a parent parameter to the route definition in the routing configuration (see Routing Configuration) of the child (inner) component to refer to the route that is defined in the parent (outer) component.

The pattern for the route in the child component is prefixed with the pattern of the parent route. The patternMatched event is then also fired for the parent route when the child route is matched.

You can reuse routes that are defined for the parent component in the child component.

Example

The parent component contains the route pattern teams/{id}:

sap.ui.core.UIComponent.extend("Father", {
   metadata : {
     routing: {
       routes: [
         {
           pattern: "teams/{id}",
           name: "teams"
         }
       ]
     }
   }
 });

The inner component contains the route pattern members/{id} with the parent Father:teams:

sap.ui.core.UIComponent.extend("Child", {
   metadata : {
     routing: {
       routes: [
         {
           pattern: "members/{id}",
           name: "members",
           parent: "Father:teams"

         }
       ]
     }
   }
 });

With this configuration, the patterns /teams/{id} and /teams/{id}/members/{id} can be matched, whereas the pattern /members/{id} alone is not valid.