Visualforceページで読み込んだLWCでページ遷移が動かない現象への対策

はじめに

Lightning用に開発したLWCをVisualforceで読み込んでClassic向け画面の開発工数を抑えたい場面があるかと思います。
そんなときにLWCで「Navigation」機能を使用した画面遷移のイベント処理が上手く動かない事象にぶち当たりました。
将来的に「Navigation」機能の挙動自体が修正されると有り難いですが、auraコンポーネント側に画面遷移処理を実装することで回避できましたので、実装例を共有します。

素直に実装してみる

「Navigation」で画面遷移するLWC、Lightning Outするaura、これらを組み込んだVFを作成します。

LWC

• sample.html

<template>
    <lightning-button label="test" onclick={navigateToObjectHome} class="slds-m-left_x-small"></lightning-button>
</template>

• sample.js

import {LightningElement} from 'lwc';
import {  NavigationMixin} from 'lightning/navigation';

export default class Sample extends NavigationMixin(LightningElement) {
  navigateToObjectHome() {
     this[NavigationMixin.Navigate]({
       type: 'standard__objectPage',
       attributes: {
         objectApiName: 'Account',
         actionName: 'home',
       },
     });
  }
}

aura

• SampleApp.app

<aura:application access="GLOBAL" extends="ltng:outApp">
</aura:application>

VF

• SampleVF.page

<apex:page >
    <apex:includeLightning />
    <div id="lt_comp" />

    <script>
      $Lightning.use("c:SampleApp", function () {
        $Lightning.createComponent("c:sample", {}, "lt_comp", function (cmp) {});
      });
    </Script>
</apex:page>

タブを追加するなどしてVFページの挙動を確認するとページ遷移が行われないのがわかると思います。

回避策

LWCでイベントをディスパッチし、LWCをラップするauraを新規追加してイベント処理を実装します。
合わせてVFからは追加したauraを読み込む修正を実施します。

LWC

• sample.js

import {LightningElement} from 'lwc';
import {  NavigationMixin} from 'lightning/navigation';

export default class Sample extends NavigationMixin(LightningElement) {
  navigateToObjectHome() {
    // this[NavigationMixin.Navigate]({
    //   type: 'standard__objectPage',
    //   attributes: {
    //     objectApiName: 'Account',
    //     actionName: 'home',
    //   },
    // });
    const movePageEvent = new CustomEvent('movePage');
    this.dispatchEvent(movePageEvent);
  }
}

aura

• SampleWrapper.cmp

<aura:component >
    <c:sample onmovePage="{!c.handlemovePage}" />
</aura:component>

• SampleWrapperController.js

({
  handlemovePage: function (cmp, event) {
    if( (typeof sforce != 'undefined') && (sforce != null) ) {
      // Componet を Application に読み込んでいるときにはこっち
      sforce.one.navigateToURL('/001');
    } else {
      // クラシック
      window.open('/001', "_top");
    }
  }
})

VF

• SampleVF.page

7行目 「c:sample」を「c:SampleWrapper」に変更

<apex:page >
    <apex:includeLightning />
    <div id="lt_comp" />

    <script>
      $Lightning.use("c:SampleApp", function () {
        $Lightning.createComponent("c:SampleWrapper", {}, "lt_comp", function (cmp) {});
      });
    </Script>
</apex:page>

参考リンク

LWCをVFで読み込む実装例
LWC Navigation機能ヘルプページ