Navigate

Navigate To Lightning Component

Navigation_ex.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:hasPageReference,lightning:isUrlAddressable"
                access="global" >
    <lightning:navigation aura:id="navigation" />
    <lightning:button label="Navigation" title="NavigationRec" onclick="{!c.NavigationRec}" />
</aura:component>

JS

({
    NavigationRec : function(component, event, helper) {
        var pageReference = component.find("navigation");
        var pageReferenceNav = {   
            "type": "standard__component",
            "attributes": {
                "componentName": "c__Target"   
            },   
            "state": {
                "c__firstName": 'vinayak'
                //setting the attribute first name as parameter to URL
            }
        };
        pageReference.navigate(pageReferenceNav, true); 
    }
})


Target.cmp

<aura:component implements="lightning:isUrlAddressable">
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <aura:attribute name="firstName" type="String" />
    <div>
        First Name : {!v.firstName} 
    </div>
</aura:component>

JS
({
    init: function(cmp, event, helper) {
        console.log('event handled');
        //getting the value from URL and setting it to UI
        var pageReference = cmp.get("v.pageReference");
        console.log(pageReference.state.c__firstName);
        cmp.set("v.firstName", pageReference.state.c__firstName);
    }
})

CSS
.THIS {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
    font-size: 40px;
}

O/P