从一个 LWC 导航到另一个 LWC

Question

>我有两个闪电网络组件，我必须在单击按钮时从一个LWC导航到另一个LWC。

我尝试使用导航服务在组件的基类中应用 NavigationMixin 函数来扩展 NavigationMixin(LightningElement(。 但它没有用。

请任何人帮我吗？

谢谢。

Answer 1

你(还不能(。

所有有趣的PageReference类型的列表表明您应该使用standard__component但目标不能是纯LWC。充其量，它必须隐藏在 Aura 包装器中。

闪电组件。要制作可寻址的闪电网络组件， 将其嵌入到实现 Lightning：isUrlAddressable interface.

这是一种痛苦。我怀疑这也是为什么我们还不能对LWC采取快速行动的原因，它们必须被包裹在光环中。

单击报价中的链接，它将引导您示例如何传递参数 (/lightning/cmp/c__helloTarget?c__firstname=John(

Answer 2

我遇到了类似的问题.我一直在尝试从社区中的另一个导航到LWC，它看起来像： 在社区中，只有comm__namedPage页面引用才有效。

Answer 3

在 Salesforce LWC 应用程序中，您可以使用以下代码从一个 LWC 组件导航到另一个组件(位于另一个选项卡/应用程序页面上(。

我的组件.html

<a href="javascript:void(0);" tabindex="0" onclick={navigateNext}>Click Here</a>

我的组件.js

import { NavigationMixin } from 'lightning/navigation';
import { CurrentPageReference } from 'lightning/navigation';
export default class MyComponent extends NavigationMixin(LightningElement){
@wire(CurrentPageReference) pageRef;
@api tabName = "NextPage";
navigateNext() {
console.log("tabName = ", this.tabName)
this[NavigationMixin.Navigate]
({
type: 'standard__navItemPage',
attributes: {
apiName: this.tabName
}
});
}
}

请将tabName变量替换为您应该导航的应用页面/选项卡名称。

就是这样。您将被导航到在 html 中单击button时指定的tabName

您还可以浏览官方文档以获取更多信息：https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_navigate_basic

Answer 4

在LWC应用程序中，我们可以通过以下任一方式执行此操作：

1. 使用容器组件

创建一个父 LWC 组件，该组件将同时包含两个 LWC 组件并一次显示其中一个组件。

单击按钮后，调度自定义事件以在组件之间导航。 在容器组件中接收自定义事件时，隐藏可见组件并显示另一个。

2. 利用LWC路线。

有关 lwc 路线的信息，请访问以下链接。

http://lwc-router.com/#/quickstart