【探索LWC开发之】 使用'lightning/navigation'来实现页面跳转
2023年08月28日
文章浏览:256

lightning/navigation 是 Salesforce Lightning Web Components (LWC) 中的一个 JavaScript 模块,用于执行导航操作,使用户能够在 Salesforce 应用程序中导航到不同的页面、视图和记录。它提供了一种轻松的方式来在 Lightning Experience 和 Salesforce移动应用中实现导航。

使用 lightning/navigation 模块,您可以通过各种导航类型和选项,以编程方式控制用户在应用程序中的浏览体验。例如,您可以使用它来导航到特定的记录页面、列表视图、自定义页面、外部网页等。

以下是一些常见的 lightning/navigation 模块的使用情况:

  • 导航到记录详情页面,以查看、编辑或克隆记录。
  • 导航到对象的列表视图,以查看对象的记录列表。
  • 导航到自定义的 Lightning 页面,以实现自定义的用户体验。
  • 导航到外部网页,以打开相关的资源。
  • 在 Lightning Console 应用中导航到不同的标签页。

这些示例只是 lightning/navigation 模块的一部分用例,它提供了丰富的导航选项,适用于不同的应用程序需求。官方文档提供了更多详细的使用方法和代码示例,您可以在其中找到更多关于该模块的信息。

官方说明:https://developer.salesforce.com/docs/platform/lwc/guide/use-navigate-page-types.html  

共14种 PageReference Types:https://developer.salesforce.com/docs/platform/lwc/guide/reference-page-reference-type.html 

下面给出部分代码示例, 仅供参考:

※注意您的JS Class需要[ extends NavigationMixin(LightningElement) ]

<template>
    <div>
        <div style="padding:5px;" ><lightning-button variant="brand-outline" label="Navigate to a Record Page" title="Navigate to a Record Page" onclick={handleGoRecordPageClick}></lightning-button></div>
        <div style="padding:5px;" ><lightning-button variant="brand-outline" label="Navigate to a List View" title="Navigate to a List View" onclick={handleGoListViewClick}></lightning-button></div>
        <div style="padding:5px;" ><lightning-button variant="brand-outline" label="Navigate to a Custom Lightning Page" title="Navigate to a Custom Lightning Page" onclick={handleGoCustomLightningPageClick}></lightning-button></div>
        <div style="padding:5px;" ><lightning-button variant="brand-outline" label="Navigate to a Web URL" title="Navigate to a Web URL" onclick={handleGoWebURLClick}></lightning-button></div>
        <div style="padding:5px;" ><lightning-button variant="brand-outline" label="Navigate to a Visualforce Page" title="Navigate to a Visualforce Page" onclick={handleGoVisualforcePageClick}></lightning-button></div>
        <div style="padding:5px;" ><lightning-button variant="brand-outline" label="Navigate to a Lightning Component" title="Navigate to a Lightning Component" onclick={handleGoLightningComponentClick}></lightning-button></div>
        <div style="padding:5px;" ><lightning-button variant="brand-outline" label="Navigate to a Tab" title="Navigate to a Tab " onclick={handleGoTabClick}></lightning-button></div>
    </div>
</template>
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class NavigationPractice extends NavigationMixin(LightningElement)  {
    handleGoRecordPageClick(){
        try {
            this[NavigationMixin.Navigate]({
                type: 'standard__recordPage',
                attributes: {
                    recordId: '001XXXXXXXXXXXXXXX', // Replace with a valid Record Id
                    actionName: 'view' // Options: 'view', 'edit', 'clone'
                }
            });
        }catch (error) {
            console.error('An error occurred:', error.message);
        }
    }
    handleGoListViewClick(){
        try {
            this[NavigationMixin.Navigate]({
                type: 'standard__objectPage',
                attributes: {
                    objectApiName: 'Account', // Replace with desired object
                    actionName: 'list'
                }
            });
        }catch (error) {
            console.error('An error occurred:', error.message);
        }
    }
    handleGoCustomLightningPageClick(){
        try {
            this[NavigationMixin.Navigate]({
                type: 'standard__namedPage',
                attributes: {
                    pageName: 'my_custom_page_name' // Replace with your custom page's API name
                }
            });
        }catch (error) {
            console.error('An error occurred:', error.message);
        }
    }
    handleGoWebURLClick(){
        try {
            this[NavigationMixin.Navigate]({
                type: 'standard__webPage',
                attributes: {
                    url: 'https://www.salesforcegogogo.com'
                }
            });
        }catch (error) {
            console.error('An error occurred:', error.message);
        }
    }
    handleGoVisualforcePageClick(){
        try {
            this[NavigationMixin.Navigate]({
                type: 'standard__webPage',
                attributes: {
                    url: '/apex/MyVisualforcePage' // Replace with your Visualforce page's API name
                }
            });
        }catch (error) {
            console.error('An error occurred:', error.message);
        }
    }
    handleGoLightningComponentClick(){
        try {
            this[NavigationMixin.Navigate]({
                type: 'standard__component',
                attributes: {
                    componentName: 'c__MyComponentName' // Replace with your component's name
                }
            });
        }catch (error) {
            console.error('An error occurred:', error.message);
        }
    }

    handleGoTabClick(){
        try {
            this[NavigationMixin.Navigate]({
                type: 'standard__navItemPage',
                attributes: {
                    apiName: 'MyTab' // Replace with the API name of your tab
                }
            });
        }catch (error) {
            console.error('An error occurred:', error.message);
        }
    }
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>


关注 收藏