Salesforce | Lightning Navigations in LWC

Lightning Navigations are used to generate a URL or navigate to a page reference. With lightning navigation, we can navigate to Pages, Records, Lists, Webpages, Custom tabs, Reports, etc.

There are the steps to use the navigation in LWC:

Step 1: import { NavigationMixin } from ‘lightning/navigation’;
Step 2: Add NavigationMixin to the component base class in order to use this navigation.
Example: export default class MyCustomElement extends NavigationMixin(LightningElement) {}
Step 3: NavigationMixin has two methods:

1. Navigate
2. generateURL

Here is the sample code of lightning navigation in LWC:

lwcNavigation.html:
<template>
<div class="slds-m-around_small">
<lightning-button label="Home Page" onclick={navigateToObjectHomePage}></lightning-button>
<lightning-button label="List View" onclick={navigateToListViewPage}></lightning-button>
<lightning-button label="New Record" onclick={navigateToNewRecordPage}></lightning-button>
<lightning-button label="View Record" onclick={navigateToRecordViewPage}></lightning-button>
<lightning-button label="Edit Record" onclick={navigateToRecordEditPage}></lightning-button>
<lightning-button label="Web Page" onclick={navigateToWebPage}></lightning-button>
<lightning-button label="Custom URL" onclick={generateCustomUrl}></lightning-button>
</div>
</template>

lwcNavigation.js:
import { LightningElement, api, track, wire } from 'lwc';
import { NavigationMixin, CurrentPageReference } from 'lightning/navigation';
export default class LwcNavigation extends NavigationMixin(LightningElement) {
@api recordId;
@wire(CurrentPageReference) pageRef;
constructor() {
super();
// console.log('pageRef=====' + this.pageRef.state.testAtt);
}
navigateToObjectHomePage(event) {
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'Case',
actionName: 'home'
}
})
}
navigateToListViewPage(event) {
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'Case',
actionName: 'list'
},
state: {
filterName: 'Recent',
testAtt: true
}
})
}
navigateToNewRecordPage(event) {
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'Case',
actionName: 'new'
}
})
}
navigateToRecordViewPage() {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: recordId,
actionName: 'view'
// objectApiName : 'Case' Optional parameter
}
})
}
navigateToRecordEditPage() {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: recordId,
actionName: 'edit'
}
})
}
navigateToWebPage(event) {
this[NavigationMixin.Navigate]({
type: 'standard__webPage',
attributes: {
url: 'https://login.salesforce.com'
},
},
true //Replace the current page with this URL.
);
}
@track recordPageUrl;
generateCustomUrl() {
this[NavigationMixin.GenerateUrl]({
type: 'standard__recordPage',
attributes: {
recordId: recordId,
actionName: 'view'
}
}).then(url => {
this.recordPageUrl = url;
console.log('Custom Url===' + this.recordPageUrl);
});
}
}