The main concept included in this recipe is navigating to the Home Page tab of the App.
<aside>
💡 If you are not familiar with the term Page Reference or the functions provided by the lightning/navigation service, review this section Navigation .
</aside>
<aside>
📂 Find the LWC in this folder: ****force-app/main/default/lwc/navToHome.
</aside>
The template shows a button that executes the navigateToHome handler.
...
<lightning-button
label="Go to Home"
class="slds-var-m-around_medium"
onclick={navigateToHome}
></lightning-button>
...
In the import section, only 1 module is imported:
//This import is providing the Navitation APIs
import { NavigationMixin } from 'lightning/navigation';
Quite unusual in LWC development, instead of using the API functions from an external module, here the extends NavigationMixin is used to inherit the properties and methods of the NavigationMixin class.
By extending NavigationMixin, the NavToHome class gains access to the navigation-related functionalities provided by the NavigationMixin class.
...
export default class NavToHome extends NavigationMixin(LightningElement) {
...
The most important part comes in the button handler: the Navigate function from the NavigationMixin API is invoked as a class method, using this.
This is due to the NavigationMixin functions are inherited.
The values in the Page reference object for jumping to the Tab Page are standard_namedPage and home as a page name.
...
navigateToHome() {
// Use the built-in 'Navigate' method
this[NavigationMixin.Navigate]({
// Pass in pageReference
type: 'standard__namedPage',
attributes: {
pageName: 'home'
}
});
}
...
<aside> 📢 For a complete detail on how to specify a Page Reference, review this page https://developer.salesforce.com/docs/component-library/documentation/en/lwc/reference_page_reference_type
</aside>