Work in progress

    Router Layouts and Nested Router Targets

    When defining routes using , the component will by default be rendered inside the <body> tag on the page (the element returned by HasElement.getElement() is attached to the <body>).

    A parent layout can be defined using the Route.layout() method. As an example to have CompanyComponent render inside a layout called MainLayout the code would look like:

    Java

    All layouts used as a parent layout must implement the RouterLayout interface.

    If there are multiple router target components using the same parent layout, then the parent layout instances will remain the same when the user navigates between the child components.

    See also:

    In some cases there might be a need to have a parent layout for a parent layout in the application. One example would be that we have a Main layout used for everything and a Menu bar that is reused for views.

    Java

    In this case we would have a MainLayout that always encapsulates MenuBar which in turn encapsulates or IconsView depending on where we have navigated to.

    In this sample we have 2 parent layers, but there is no restriction in the amount of nested layouts.

    ParentLayout route control using @RoutePrefix

    There might be some cases where a parent layout should supplement the navigation route by adding to the route location.

    This can be done by annotating a parent layout with @RoutePrefix("prefix_to_add")

    Java

    In this example the route that PathComponent would receive is some/path as in the case of the previously mentioned SomePathComponent

    Absolute routes

    In these cases we can add absolute = true to either the @Route or @RoutePrefix annotations.

    So if we have something that we want to use in many places in the layout, but do not want to get the route prefix added to our navigation path we could have a class MyContent built the following way:

    Java

    In this case even though the full chain path should be some/content we actually get just content as we have defined that this should be absolute.

    The same works when having absolute defined in the middle of the chain for instance:

    Java

    In this case the bound route would be framework/tutorial even though the full chain is some/framework/tutorial