Routing and Navigation

Vaadin provides the Router class to structure the navigation of your web application into logical parts.

The router takes care of serving content when the user navigates within an application. It includes support for nested routes, access to route parameters and more.

The user navigates by interacting with UI elements such as buttons and menus. When this occurs, the interaction needs to be mapped to a particular route.

Using the @Route Annotation

You can use the @Route annotation to define any component as a route target for a given URL fragment.

Example: Defining the HelloWorld component as the default route target (empty route) for your application.

public class HelloWorld extends Div {
    public HelloWorld() {
        setText("Hello world");

Example: Defining the SomePathComponent component as the target for the specific route, some/path.

public class SomePathComponent extends Div {
    public SomePathComponent() {
        setText("Hello @Route!");
  • Assuming your app is running from the root context, when the user navigates to, either by clicking a link in the application or entering the address in the address bar, the SomePathComponent component is shown on the page.

If you omit the @Route annotation parameter, the route target is derived from the class name. For example, MyEditor becomes "myeditor", PersonView becomes "person" and MainView becomes "".