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?


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));
         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:-

        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

  • 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
    Oct 8 '19 at 9:11
  • I don't have the documentation but i have tested it and works fine for me. Oct 8 '19 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
    Oct 8 '19 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
    Oct 8 '19 at 10:53
  • @sanketkumar And also how do I call a web component for a standard lightning one?
    – molinet
    Oct 8 '19 at 10:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.