从一个LWC导航到另一个LWC

Question

我有两个lightning web组件，我必须通过点击按钮从一个LWC导航到另一个LWC。

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

有谁能帮帮我吗？

谢谢。

Answer 1

你(现在)还不能。

List of all interesting PageReference types说你应该使用standard__component，但目标不能是纯LWC。它最多只能隐藏在Aura包装器中。

闪电组件。要创建可寻址的Lightning web组件，请将其嵌入到实现lightning:isUrlAddressable接口的Aura组件中。

这是一种痛苦。我怀疑这也是为什么我们还不能用LWC快速行动的原因，它们必须被Aura包裹起来。

单击引号中的链接，您将看到如何传递参数的示例(/lightning/cmp/c__helloTarget?c__firstname=John)

Answer 2

我也遇到过类似的问题。我一直在尝试从社区中的另一个LWC导航到LWC，它看起来是这样的:在社区中，只有comm__namedPage页面引用才能工作。

Answer 3

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

myComponent.html

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

myComponent.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中的tabName时，将导航到指定的button

您还可以通过官方文档了解更多信息：https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_navigate_basic