Docs

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

Docs

Defining Routes with @Route

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.

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.

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

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

@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 https://example.com/some/path, either by clicking a link in the application or entering the address in the address bar, the SomePathComponent component is shown on the page.

Note
 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 "".

03B4CD12-60BC-4268-995F-454457ED2BA1