1

I am new to Lit Element, let's say I have two lit templates : <page-one> and <page-two> and I'm using Vaadin Router to navigate between them.

I have initialized the Routes as :

router.setRoutes([
{
path: "/",
component: "page-one",
},
{
path: "/page-two",
component: "page-two",
action: async () => {
    await import(
        "../src/components/page-two"
    );
  }
])

And I have added a button click to navigate to the other template using Router.go("page-two") , which is working fine.

Since I am not using the second template inside a Render(), how do I pass on data from <page-one> to <page-two> ?

Note : If I had it in the Render() method, I could have passed it as a @property , like : <page-two @value="data"> </page-two>. But that is not the case here.

Sleepy Coder
  • 11
  • 4
  • probably easiest to do it through route params or query params. like: `/page-two?data=test`, then grab the data from the router params in connectedCallback. the router does not inject anything into the components that act as pages. It simply changes the tag name inside of the router outlet and the browser loads the component based on the registered elements. You can get more advanced with shared data if you create a shared service between routes. take a look at https://github.com/Christian24/webcomponents-di for an idea of how to implement dependency injection across components – Ben Bradshaw May 07 '22 at 00:26

0 Answers0