In this topic we will cover different way of Navigation used in LWC
Use the navigation service, lightning/navigation
, to navigate to many different page types, like records, list views, and objects.
In the component’s JavaScript class, import the NavigationMixin
function from the lightning/navigation
module.
import { NavigationMixin } from "lightning/navigation";
After importing you have to Apply the “NavigationMixin” function to your component’s base class
export default class MyCustomElement extends NavigationMixin(LightningElement) {}
Instead of a URL, the navigation service uses a PageReference
. A PageReference
is a JavaScript object that describes the page type, its attributes, and the state of the page.
PageReference Property
- type :- Its a String type, To navigate in Lightning Experience, Experience Builder sites, or the Salesforce mobile app, define a
PageReference
object. ThePageReference
type generates a unique URL format and defines attributes that apply to all pages of that type. - attributes :- Its a Object type, Map of name-value pairs that determine the target page. The page type defines the set of possible attribute names and their respective value types.
- state :- Its a Object type, Set of key-value pairs with string keys and string values. These parameters conditionally customize content within a given page. Some page reference types support a standard set of
state
properties.
The navigation service adds two APIs to your component’s class. Since these APIs are methods on the class, invoke them from this
.
▶[NavigationMixin.Navigate](pageReference, [replace])
A component callsthis[NavigationMixin.Navigate]
to navigate to another page in the application.
▶[NavigationMixin.GenerateUrl](pageReference)
A component callsthis[NavigationMixin.GenerateUrl]
to get apromise
that resolves to the resulting URL. The component can use the URL in thehref
attribute of an anchor. It can also use the URL to open a new window using thewindow.open({url})
browser API.
In this article, I have mentioned few Page References that are given below.
standard__namedPage
![](https://cdn-images-1.medium.com/max/800/1*5whR63l3qgY-ntgMIbRtvw.png)
standard__objectPage
![](https://cdn-images-1.medium.com/max/800/1*vqqmkFqtkIAMjil7HwrnJg.png)
![](https://cdn-images-1.medium.com/max/800/1*-m5KfxvmkJ6Ftsq0N2JWfQ.png)
standard__navItemPage
![](https://cdn-images-1.medium.com/max/800/1*bjq7QhnK-BKuiUSEmhEjhg.png)
standard__recordPage
![](https://cdn-images-1.medium.com/max/800/1*3ZqE65crdv9OEPnb93J_GQ.png)
![](https://cdn-images-1.medium.com/max/800/1*ge0ZcvqJMbOqDBH7SidO1g.png)
standard__recordRelationshipPage
![](https://cdn-images-1.medium.com/max/800/1*OQkyAIvwyD0DkuhvJfdYGQ.png)
standard__webPage
![](https://cdn-images-1.medium.com/max/800/1*kfKksthMqHN_OrcpPQ-lDg.png)
For more information about PageReference you can click here
Demonstration
Navigate to Home Page
![](https://cdn-images-1.medium.com/max/800/1*LFucpmE4LHUEYEVpUmphzA.png)
![](https://cdn-images-1.medium.com/max/800/1*iSO5Hgzngk51oJCtof8-zg.png)
![](https://cdn-images-1.medium.com/max/800/1*p8oIgx5DC52PNDRnyv8aqg.gif)
Navigate to Object Page
![](https://cdn-images-1.medium.com/max/800/1*tT5ZGvd_C3kdC7dVRxC6Ew.png)
![](https://cdn-images-1.medium.com/max/800/1*c6RhKi0I2ikb9E_eebeLGA.png)
![](https://cdn-images-1.medium.com/max/800/1*ytd3J6tYflzZqK0LCMZSjQ.gif)
Navigate to Object page with default value
To provide a default value, we need to import encodeDefaultFieldValues from ‘lightning/pageReferenceUtils’.
import {encodeDefaultFieldValues} from 'lightning/pageReferenceUtils'
![](https://cdn-images-1.medium.com/max/800/1*zC8_gMucg3WWblR_OeMexA.png)
![](https://cdn-images-1.medium.com/max/800/1*MxoiS7s1YxFkF0EC9E9yzw.png)
![](https://cdn-images-1.medium.com/max/800/1*3_wd5VoiXyOsHR3wwEHrqA.gif)
Navigate to Tab
![](https://cdn-images-1.medium.com/max/800/1*zAwhQm3ObhZlQwHcwvY6jQ.png)
![](https://cdn-images-1.medium.com/max/800/1*3nciXlUgLHT-pNcymBbbkw.png)
![](https://cdn-images-1.medium.com/max/800/1*ONlunsEiQbH7-feMVwA8Ig.gif)
Navigate to Record Page
![](https://cdn-images-1.medium.com/max/800/1*VoJvskVA4AozPpnl8_gzqw.png)
![](https://cdn-images-1.medium.com/max/800/1*hluCqXYmHECBvH-OEK14jg.png)
![](https://cdn-images-1.medium.com/max/800/1*sri8-00ZtpSH2PAu81eFRg.gif)
Navigate to Record Relationship Page
![](https://cdn-images-1.medium.com/max/800/1*5YHrkMtHtD4LR13AULj8KA.png)
![](https://cdn-images-1.medium.com/max/800/1*emCknL82XRFqrC6PhCOKWQ.png)
![](https://cdn-images-1.medium.com/max/800/1*uBRCSUXjuuIjvlxoP7u0-g.gif)
Navigate to External Web Page
![](https://cdn-images-1.medium.com/max/800/1*M4pt4Gzvnl5-7riOj-tJGA.png)
![](https://cdn-images-1.medium.com/max/800/1*Sd-JQ6hhtUNwDWUP7gWa0g.png)
![](https://cdn-images-1.medium.com/max/800/1*775itCcuejjS7nSLcxQeng.gif)
Navigate to LWC Component
![](https://cdn-images-1.medium.com/max/800/1*RWkfTOmFHzOuVG1zhQECBA.png)
![](https://cdn-images-1.medium.com/max/800/1*ikKJ1GY4OIR7dhgYA9A2fA.png)
![](https://cdn-images-1.medium.com/max/800/1*nWlR71F4lkiUySNOUgJWRQ.gif)
Get Current Page Reference
![](https://cdn-images-1.medium.com/max/800/1*30yKdS2bOibjAPDOP8SbPA.png)
![](https://cdn-images-1.medium.com/max/800/1*u9w_512sKRlDmkPGxm6VmQ.png)
![](https://cdn-images-1.medium.com/max/800/1*U9DZ6ikRvjG3Zjqa3eymLQ.gif)
Follow me on linkedIn and Twitter for such more related post
Comments
Post a Comment