Lightning:navigation

Lightning:navigation is used to navigate to a given pageReference or to generate
a URL from a pageReference.To navigate we need to define a PageReference object.
The pageReference type generates a unique URL format and defines attributes that
apply to all pages of that type. Using v.pageReference we can capture the URL parameters.

Following are the supported type where we can navigate,

• Lightning Component 
• Knowledge Article
• Named Page
• Navigation Item Page
• Object Page
• Record Page
• Record Relationship Page
• Web Page

PageReference Object:

Pagereference is a javascript object that represent reference to a page, providing a well-defined
structure that describes the page type and its corresponding values.

The following PageReference properties are supported:

TYPE is a string which is required and is the API name of the PageDefinition.

Attributes is an object and is required. Values for each attribute specified by the PageDefinition.

State is an object  and is an additional parameter which we can called as a filter which is tied to the
query string of the URL in Lightning Experience and is used to display data from component where we are
navigating based on some filters: Ex: Navigating to account page we can use state as,

state: {

        filterName: "RecentlyViewedAccounts"

    }

or 

state: {

        filterName: "MyAccounts"

    }

Note: 

If we are navigating to component than the component where we are navigating must implement lightning:isUrlAddressable interface.





To Navigate to component sample syntax used is as below:

{ 

    "type": "standard__component",

    "attributes": {

        "componentName": "c__MyLightningComponent" 

    }, 

    "state": {

        "myAttr": "attrValue" 

    }

}

To Navigate to object page we need to use type as:

standard__objectPage


To Navigate to record page we need to use type as:

standard__recordPage

To navigate to a web Page:

standard__webPage

Now let see a simple example to navigate from account record page to account list view:

NavComp.cmp

  <aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global">
 
    <lightning:navigation aura:id="navService"/>
    <lightning:button name="Test" label="Navigate to Account list view" onclick="{!c.navigate}"/>
 

</aura:component>

NavCompcontroller.js

({
    navigate : function(component, event, helper) {
         var navService = component.find("navService");
     
        var pageReference = {
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'list'
            },
            state: {
                filterName: "MyAccounts"
            }
        };
        navService.navigate(pageReference);
    }
})