Defining Routes
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 application 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.
If you omit the @Route
annotation parameter, the route target is derived from the class name.
The derived name is in lower case and the trailing View is removed.
Also, MainView or Main names are mapped to root (value is "").
For example:
-
MyEditor
becomes"myeditor"
-
PersonView
becomes"person"
-
MainView
becomes""
Creating Route Aliases
You can also use @RouteAlias
to create aliases for routes.
A primary route created by @Route
is required.
It’s possible to create multiple aliases for a route.
Example: Adding two @RouteAlias
annotations for HomeView
.
Navigating to "home"
or "main"
navigates to the same view as the main route.
@Route("")
@RouteAlias("home")
@RouteAlias("main")
public class HomeView extends Div {
public HomeView() {
setText("Hello @Route!");
}
}
693776E5-D147-403A-A01D-04A3E9BF46AC