4

Is there a way for navigating from one lightning web component to another via lightning/navigation as I was possible in lightning?

And is there also an equivalente for component.destroy() in lightning web component?

1 Answer 1

6

You can navigate to one lightning web component from another lightning web component by creating a URL in Base64 encoded form. Use the below code in your method to navigate. Here the name of the lightning web component where I am navigating is one.

   var compDefinition = {
      componentDef: "c:one",
      attributes: {
        //
      }
    };
    // Base64 encode the compDefinition JS object
    var encodedCompDef = btoa(JSON.stringify(compDefinition));
    this[NavigationMixin.Navigate]({
         type: 'standard__webPage',
         attributes: {
               url: 'http://instance url.com/one/one.app#' + encodedCompDef
        }
   });

Another Approach(Documented way)

You can navigate to one lightning web component from another Lightning web component. You need to embed the Lightning web component inside an Aura Component and then use lightning navigation as below:-

To make an addressable Lightning web component, embed it in an Aura component that implements the lightning:isUrlAddressable interface.

  • Type :- standard__component
  • Experience :- Lightning Experience, Salesforce Mobile App

To Navigate use below code in your method:-

this[NavigationMixin.Navigate]({
        type: "standard__component",
        attributes: {
            componentName: "c__OrderLinesUiFullPage"
        },
        state: {
            c__orderId: "test"
        }
    });

Refer this question to know how you can retrieve the value in Aura component from Lightning web Component:- How to pass attribute when redirecting from lwc to aura component

9
  • Can you provide links to product documentation that describes the first approach? I wonder if this is a supported way of doing it... the second approach is definitely documented and supported (since it effectively uses Aura rather than LWC).
    – Phil W
    Commented Oct 8, 2019 at 9:11
  • I don't have the documentation but i have tested it and works fine for me. Commented Oct 8, 2019 at 9:28
  • Just because something works now doesn't mean it will continue to work. That's the difference between documented and undocumented features.
    – Phil W
    Commented Oct 8, 2019 at 9:34
  • Thanks @sanketkumar ! If I want to retrieve orderId I just need to create an ` @api orderId` or do I need to do a further implementation in my lightning web component js?
    – molinet
    Commented Oct 8, 2019 at 10:53
  • @sanketkumar And also how do I call a web component for a standard lightning one?
    – molinet
    Commented Oct 8, 2019 at 10:56

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .