vaadinvaadin-flowvaadin-router

Initialize router events from a template file in a Vaadin (20) Flow project


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.


Solution

  • 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.