Basic Routing and Navigation

You can navigate around the views in an application in two basic ways: either by interacting with the UI or by entering a URL to directly navigate to a specific view. When navigating with buttons or other components in a UI, the browser URL can be updated to reflect the current view. The user can then copy or link the URL to give direct access to the specific views.

Routing URLs to content

Routing maps URLs to views or resources to navigate directly to the desired content or functionality. Typically, the root route / shows a main view, a route such as /users could show a sub-view that displays a list of users, and a route with the user ID as a parameter, such as /users/dadams, would show a specific user.

You can have routes to views written in either Java or TypeScript, and you can mix them in the same application. While Java views require a server connection, TypeScript views also work offline.

In Java views, use the @Route annotation to define a route for a view.

@Route("/login")
public class LoginScreen extends Div {
	public LoginScreen() {
        LoginForm loginForm = new LoginForm();
        // Implementation details omitted
        add(loginForm);
	}
}

See Creating a Main View for an introduction to creating a main view with a menu bar to select from a number of sub-views. To navigate to a view, you need to acquire a link to the view.

The following features are supported:

  • Child routes, such as /main/users and /main/premises.

  • Route aliases, such as showing /main/users as the default view when /main is entered.

  • Fallback routes, such as showing an error page for a path such as /users/imvaliduser.

  • Route parameters, such as /users/:userid to catch URLs such as /users/dadams.

  • Redirects, such as redirecting root route / to /login.

Routing is handled on the client-side by the Vaadin Router JavaScript library. While we use the library here to enable routing for TypeScript views, you can use it in any JavaScript application.