[SalesForce] Navigate from one lightning web component to another via lightning/navigation

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?

Best Answer

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

Related Topic