Using slots and props with the component

[aress31]

Hi Vaadin team,

Super work for this router, really easy to use!

I am wondering whether it is possible to specify props and slots for the components defined in the routes. For example, something like:

[
  --- SNIP ---
 {
        children: [
          { component: 'my-service-view', path: '/compliance', props:".data=${compliance}" },
          { component: 'my-service-view', path: '/penetration-testing', props:".data=${penetration-testing}" },
        ],
        path: '/services',
      },
}
 --- SNIP ---
]

With ${compliance} and ${penetration-testing} being JSON objects.

Looking forward to an answer,

Best, Alex

[web-padawan]

This is not currently supported.

We recommend using URL parameters (which obviously can't be used for passing JSON data). Then the view components can fetch the data based on those.

[ocsi0520]

@aress31 Hey, I know it's been a little late but you could use the action property instead of component when describing the child routes.

[
  --- SNIP ---
 {
        children: [
          {
            path: '/compliance',
            action(_context, _command): HTMLElement {
               const myServiceView = document.createElement('my-service-view');
               myServiceView.data = compliance;
               return myServiceView;
             }
           },
                    {
            path: '/penetration-testing',
            action(_context, _command): HTMLElement {
               const myServiceView = document.createElement('my-service-view');
               myServiceView.data = penetrationTesting;
               return myServiceView;
             }
           },
        ],
        path: '/services',
      },
}
 --- SNIP ---
]