0

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?
ollitietavainen
  • 3,900
  • 13
  • 30
ThomasH
  • 22,276
  • 13
  • 61
  • 62

1 Answers1

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],
  },
];
Tatu Lund
  • 9,949
  • 1
  • 12
  • 26
  • Thanks for the swift answer, I will try that and report back. – ThomasH Sep 14 '21 at 15:45
  • Doesn't quite work. The child component is loaded alright when the root ULR is requested in the browser. But the URL is not changed to match the child path (and hence e.g. breadcrumbs which are based on the route do not render correctly). – ThomasH Sep 15 '21 at 10:30
  • We switched to this approach and accepted the doubling of the child view under two URLs (for the time being). – ThomasH Sep 27 '21 at 09:08