I have a Vaadin 20 application that is Flow-based. All views are written in Java, and the routes are set up with Java. I wanted to have a nicer navigation component, so I created a frontend TS template for my project, as frontend/src/vaadin-nav.ts
. It has a bunch of <a>
elements for navigation purposes.
My question is, how should I link to the server-side routes correctly from the template? I have e.g. AboutView.java
with @Route(value = "about", layout = MainView.class)
. How can I tell in the template that "navigate to 'about'"? I tried checking the Router instructions for Fusion, but they require that I have set up a client-side router object with an outlet. I don't want to do that because I already have a MainView.java
that sets up the routing and outlet.
Vaadin 20 always uses the client-side Vaadin Router. In an application with Flow views and a server-side MainView.java
or similar, the client-side router is simply delegating all routing decisions to the server and using the root of the page as the router outlet.
The client-side router is intercepting clicks on local <a href>
links (e.g. not linking to a separate hostname) and treats those as router actions. If there isn't a client-side route, then it delegates to the server.
What this means is that <a href="about">About</a>
should be enough in your vaadin-nav.ts
file.