3

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.

Jens Jansson
  • 4,626
  • 4
  • 25
  • 29

1 Answers1

2

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.

Leif Åstrand
  • 7,820
  • 13
  • 19
  • That worked! I had a bunch of nonexisting routes configured but it always showed the default view when I clicked on them, so I thought they didn't work. I was expecting a "route not found" page for a nonexisting route. But now when I configured one with "about", it navigated there! Thanks. – Jens Jansson May 14 '21 at 09:44
  • Default view for nonexistent instead of an error page sounds like a bug in Vaadin, unless you have the default view as `@Route("/*")` or similar so that it would catch anything that isn't explicitly defined? – Leif Åstrand May 14 '21 at 11:41