Router Layouts

When using client-side routing it is possible to compose the page layout without any server intervention, so as the initial application page also known as Application Shell can be shown when in offline mode.

Vaadin Router allows to group related routes together under a common parent by using the children property during the configuration:

router.setRoutes([
  {
    path: '',
    component: 'app-layout',
    action: async () => { await import('./views/app-layout-view'); },
    children: [
      {
        path: 'help',
        component: 'app-help',
        action: async () => { await import('./views/app-help-view'); }
      },
      {
        path: 'categories',
        component: 'app-categories',
        action: async () => { await import('./views/app-categories-view'); }
      }
    ]
  }
]);