Navigate to a independent Aura component from Visualforce Page

Hi Guys,

Today in this post we are going to learn on, How to navigate or Display Lightning Components on the click of a button from a Visualforce Page.  

Step 1 : Create Lightning Component [ lcFromVF.cmp ]

<aura:component
    implements="force:hasRecordId,force:lightningQuickActionWithoutHeader,flexipage:availableForAllPageTypes"
    access="global">

    <aura:attribute name="recordId" type="String" />
</aura:component>

Step 2 : Create Visualforce Page [ lcVF.vfp ]

<apex:form>
        <button onclick="NavigatetoauraComponent();" type="button">
            Navigate to aura Component
        </button>
    </apex:form>
    <script>
    function NavigatetoauraComponent(){
        var compDefinition = { 
			"componentDef" : "c:lcFromVF", 
			"attributes" :{ 
			  "recordTypeId" : "00Q2v00001fum80",
			} 
		};
		// Base64 encode the compDefinition JS object
		var encodedCompDef = btoa(JSON.stringify(compDefinition));
		window.parent.location = "/one/one.app#"+encodedCompDef;
    }

  </script> 
</apex:page>

if you have any suggestions or issue with it, you can post in comment box.

Thanks
Apex Coder