LWCでページ遷移時にクエリパラメータを渡す

ページ遷移元

stateプロパティを設定することで、クエリパラメータを追加することができる。削除するときはundefinedを設定する。
stateプロパティは名前空間プレフィックス__で始める必要がある。管理パッケージでない場合はc__となる。
stateで使用できるのは文字列のみ。

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

export default class SampleA extends NavigationMixin(LightningElement) {
    navigateToRecordViewPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                objectApiName: 'SObjectName__c',
                recordId: this.selectedId
            },
            state: {
                c__viewType: 'simple' // クエリパラメータを設定
            }
        });
    }
}

ページ遷移先

CurrentPageReferenceを利用して、currentpagereference.state.c__xxxからクエリパラメータを取得する。

import { LightningElement, wire } from "lwc";
import { CurrentPageReference } from "lightning/navigation";

export default class SampleB extends LightningElement {
    currentPageReference;

    @wire(CurrentPageReference)
    setCurrentPageReference(currentPageReference) {
        this.currentPageReference = currentPageReference;
    }

    get viewType() {
        return this.currentPageReference ? this.currentPageReference.state.c__viewType : undefined;
    }
}

参考

• さまざまなページ種別への移動 - Lightning Web Components 開発者ガイド
• クエリパラメータの追加 - Lightning Web Components 開発者ガイド