Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

Navigating Between Routes

You can use the RouterLink component to create links pointing to route targets in your application.

Navigation with RouterLink fetches the content of the new component without reloading the page. The page is updated in place.

Example: Using RouterLink for a simple navigation target.

void routerLink() {
    Div menu = new Div();
    menu.add(new RouterLink("Home", HomeView.class));
}

@Route(value = "")
public class HomeView extends Component {
}

Example: Using RouterLink for a navigation target with Route template route.

void routerLink() {
    Div menu = new Div();
    // user/123/edit
    menu.add(new RouterLink("Edit user details",
            UserProfileEdit.class, new RouteParameters("userID", "123")));
    // user/edit
    menu.add(new RouterLink("Edit my details",
            UserProfileEdit.class));
}

@Route("user/:userID?/edit")
public class UserProfileEdit extends Div implements BeforeEnterObserver {

    private String userID;

    @Override
    public void beforeEnter(BeforeEnterEvent event) {
        userID = event.getRouteParameters().get("userID").
                orElse(CurrentUser.get().getUserID());
    }
}
Note
 Because the parameter is defined as optional, both URL links with and without the parameter are possible.

Example: Using RouterLink for navigation targets, with typed URL parameters, where the navigation target class implements HasUrlParameter.

void routerLink() {
    Div menu = new Div();
    menu.add(new RouterLink("Greeting",
            GreetingComponent.class, "default"));
}

@Route(value = "greet")
public class GreetingComponent extends Div
        implements HasUrlParameter<String> {

    @Override
    public void setParameter(BeforeEvent event,
            String parameter) {
        setText(String.format("Hello, %s!", parameter));
    }
}

It is also possible to navigate with standard <a href="company"> type links.

Standard links result in a page reload, but you can enable navigation without page reload by adding the router-link attribute, for example <a router-link href="company">Go to the company page</a>.

Server-Side Navigation

You can trigger navigation from the server side using UI.navigate(String), where the string parameter is the location to navigate to.

You can also use UI.navigate(Class<? extends Component> navigationTarget) or navigate(Class<? extends C> navigationTarget, RouteParameters parameters). This avoids having to generate the route string manually and triggers the browser location update and the addition of a new history state entry.

Example: Navigation to the company route target when clicking a button:

NativeButton button = new NativeButton(
        "Navigate to company");
button.addClickListener(e ->
     button.getUI().ifPresent(ui ->
           ui.navigate("company"))
);

Example: Navigation to the user/123/edit route target when clicking a button:

NativeButton editButton = new NativeButton(
        "Edit user details");
editButton.addClickListener(e ->
        editButton.getUI().ifPresent(ui -> ui.navigate(
                UserProfileEdit.class,
                new RouteParameters("userID", "123")))
);
Note
 Router links work even if the session has expired. We recommend that you use them instead of handling navigation on the server side.

05DB1F77-866E-49D0-9BB8-44BFF7B36EFB