Navigate from one LWC to another LWC with out using Aura Component

We can navigate from one LWC component to another LWC component by calling the target component inside the aura component, but we have an another approach to directly redirect to target lwc component with out Aura. 

Create two Lightning Web Component to test out this feature:

1. targetWebComp

2. sourceWebComp

This html file contains Label api property and it will get the value from source component.

targetWebComp.Html

This Js file contains the public @api property and it will get the value from the source component.

targetWebComp.Js

This Html file contains a button with onclick event, this will help to redirect to another LWC component when user clicks on it.

sourceWebComp.Html

This js file contains navigateToLWC event,here we are generating the target component url and convert into base64 encoded format, This URL will be later used with lightning-navigation service to navigate to the component using PageReference Object of web page Type.

sourceWebComp.Js

Demo: