1

In a basic application you have a main vaadin-app-layout with <slot>s where the router places child components. But what if such a child component has itself child components and I want to use routes to route between them? Can I have a nested vaadin-app-layout with slots? And how would the router know in which of the slots to fill a component for any given URL path?

As a concrete example, imagine a typical application layout with header, navigation bar on the left, and a main view right to it. Loading different views to the main view pane works alright with Vaadin router. But now imagine that one of the components loaded to the main view is itself a Vaadin tab view with two tabs, and I want to be able to route to each of these tabs from anywhere within the application, bookmark them, asf.

ollitietavainen
  • 3,900
  • 13
  • 30
ThomasH
  • 22,276
  • 13
  • 61
  • 62

1 Answers1

3

Vaadin Router supports this by specifying the component property both in parent and child route objects.

See "Nested Components" section at https://vaadin.github.io/router/vaadin-router/#/classes/Router/demos/demo/index.html

There should be no problem using 2 or more levels of nested layouts. For example:

router.setRoutes([
  {path: '/',
    component: 'x-main-layout',
    children: [
      {path: '/', component: 'x-home-view'},
      {path: '/subsection',
        component: 'x-subsection-layout',
        children: [
          {path: '/', component: 'x-other-view'},
          {path: '/list', component: 'x-list-view'},
        ]
      },
    ]
  }
]);

When navigating to /subsection/list you would end up with:

<x-main-layout>
  <x-subsection-layout>
    <x-list-view></x-list-view>
  </x-subsection-layout>
</x-main-layout>

The view components are simply added as children according to your route hierarchy so when you have a shadow root on the component the contents will be slotted into the default slot.

Haprog
  • 793
  • 1
  • 9
  • 21
  • Great, thanks! Is it mandatory to use the `vaadin-app-layout` component to host the ``s, e.g. in your example would the HTML templates for both `x-main-layout` and `x-subsection-layout` contain vaadin-app-layout elements? Or can any component host the slot element that the router uses? – ThomasH Oct 12 '21 at 06:43
  • 1
    `vaadin-app-layout` is just a simple layout component that provides an optional top menu and collapsible sidebar. It's not required for anything. You can use any elements/components you like. If you do want to use `vaadin-app-layout` you should only have it in the top most component (in this case within `x-main-layout`) since it's designed to wrap the entire application. – Haprog Nov 02 '21 at 07:50
  • Thanks again. There is still an issue with using the `title` attribute in child routes, but I have openend a ticket for that (and also found a work-around). – ThomasH Nov 02 '21 at 14:39