Vaadin: Automatically route to a child component

Question

I am following a basic routing setup as described in the docs where you have an umbrella component and then multiple child components that render into a <slot> of the umbrella component.

So the HTML Template of the main x-layout component looks somewhat like this:

<vaadin-app-layout>
  <slot></slot>
</vaadin-app-layout>

and my routes look somewhat like this:

router.setRoutes([
    {path: '/',
      component: 'x-layout',
      children: [
        {path: '/users', component: 'x-user-list'},
        {path: '/rooms', component: 'x-rooms-list'},
      ]
    }
  ]);

In contrast to the examples in the docs I want to immediately load one of the child components (say, x-user-list) when the application is invoked with its root URL ('/'), and without the user selecting a link from a navigation bar or so. So I need a means to automatically invoke a route from the main component. How can I achieve that?

• In contrast to the examples I want to maintain a distinct path for each child, so something like this wouldn't work: {path: '/', component: 'x-navigation-layout', children: [{path: '/', component: 'x-user-list'}, ...]}
• I cannot use redirect in the route setup, as it conflicts with the component attribute which is necessary to load the umbrella component.
• I cannot use a redirect in an onBeforeEnter event handler in the component for the same reason, and the onAfterEnter handler does not permit a redirect.
• I could use the Route.go() static method for the navigation, but where to put it?

Answer 1

Try the following structure for the routes:

export const views: ViewRoute[] = [
  {
    path: '',
    component: 'x-user-list',
    title: '',
  },
  {
    path: 'userlist',
    component: 'x-user-list',
    title: 'User List',
  },
];
export const routes: ViewRoute[] = [
  {
    path: '',
    component: 'x-layout',
    children: [...views],
  },
];