Routing within Child Components

Question

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.

Answer 1

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.