lightning/navigation
是 Salesforce Lightning Web Components (LWC) 中的一个 JavaScript 模块,用于执行导航操作,使用户能够在 Salesforce 应用程序中导航到不同的页面、视图和记录。它提供了一种轻松的方式来在 Lightning Experience 和 Salesforce移动应用中实现导航。
使用 lightning/navigation
模块,您可以通过各种导航类型和选项,以编程方式控制用户在应用程序中的浏览体验。例如,您可以使用它来导航到特定的记录页面、列表视图、自定义页面、外部网页等。
以下是一些常见的 lightning/navigation
模块的使用情况:
这些示例只是 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>