Lightning Web Component Navigation Service

Let’s discuss here how to use the Lightning web components NavigationMixin. To navigate in Lightning Experience, Lightning Communities, and the Salesforce app, use the navigation service,lightning/navigation Instead of a URL, the navigation service uses a PageReference, which describes the page. Using a PageReference insulates your component from future changes to URL formats. It also allows your component to be used in multiple applications, each of which can use different URL formats. A PageReference is a JavaScript object that describes the page type, its attributes, and the state of the page. To navigate to a PageRefererence, use the navigation service. To Use the NavigationMixin

 1. Import the lightning/navigation module.

2. Apply the NavigationMixin function to your component’s base class.

3. Create a plain JavaScript PageReference object that defines the page.
4.Call the navigation service’s [NavigationMixin.Navigate](pageReference, [replace]) function to dispatch the navigation request. Ifreplace is set to true, the pageReference replaces the existing entry in the browser history so the user doesn’t have to press the back button twice. The default value is false.

 

The NavigationMixin adds two APIs to your component’s class. Since these APIs are methods on the class, they must be invoked with the this reference.

  • [NavigationMixin.Navigate](pageReference, [replace])
    A component calls this[NavigationMixin.Navigate] to navigate to another page in the application.
  • [NavigationMixin.GenerateUrl](pageReference)
    A component calls this[NavigationMixin.GenerateUrl] to get a promise that resolves to the resulting URL. The component can use the URL in the href attribute of an anchor. It can also use the URL to open a new window using the window.open(url) browser API.
Navigate to Object Home
Use this code to navigate to the account home

 

Navigate to List View

Use this sample code to navigate to the list view

Navigate to New Record 

Use this code to navigate to the new record model popup.

 

Navigate to View Record

Use this code to navigate to the record view

Navigate to the Edit Record 

Use this code to navigate to the edit record model popup

Navigate to Related List 

Use this code to navigate to the related list

Navigate to Tab 

Use this code to navigate to the tab

Navigate to Files Home 

Use this code navigates to files

 

Navigate to chatter 

Use this code to navigate to chatter

 

Here is the complete code. now create a lightning web component using the following sfdx command

navexamples.html

 

 

navexamples.js code

navexamples.js-meta.xml

 

Push changes to scratch org and add it to the page layout for testing .