Navigation

To call a view, it needs a path, which is also called a route.

  1. First you have to select the root element of the view

  2. Then specify any path under Routing > Route. (Can also be an empty string)

image not found

Each route must be unique. There can never be multiple views with the same route at the same time

Navigate to another view

To navigate to another view, there are several possibilities.

Navigation with RouterLinks.

  1. Drag a RouterLink onto the View

  2. In the Properties, click NavigationTarget
    image not found

  3. In the following dialog you can search for your view where this link should navigate to

Serverside navigation

The server can also trigger navigation. To achieve this, you can do the following:

  1. Drag a button onto the view

  2. Double-click the

  3. Then enter the following code:

UI.getCurrent().navigate(OtherView.class)

Complex Navigation

Sometimes various information must also be passed to the view to be called. The following code snippets can be used for this purpose:

// Es können Datentypen wie z.B. String übergeben werden
UI.getCurrent().navigate(OtherView.class, "Hallo Welt");

In OtherView.class the HasUrlParameter<String> interface must be implemented. To get the parameter there now, the following method must be implemented:

@Override
public void setParameter(final BeforeEvent event, final String parameter)
{
    System.out.println("Parameter was " + parameter);
}

Among others, Query parameters can also be passed. More about this can be read here: https://vaadin.com/docs/v14/flow/routing/tutorial-router-url-parameters

However, whole objects can also be passed using the RapidClipse framework.

Navigation.To(OtherView.class)
            .withParameter("myData", myData)
            .navigate();

To do this, the following must be implemented in OtherView.java:

@NavigationParameter
private MyDataType myData;

@Override
public void navigationParametersUpdated()
{
    System.out.println("myData is now available!");
}

  • navigationParametersUpdated() does not need to be implemented.

  • .withParameter() can be used to pass any data type.