LWC中使用history.back()时能否传递Track/API变量？

直接通过history.back()无法直接向目标组件传递@track或@api变量——因为history.back()只是触发浏览器历史栈的回退操作，不会重新初始化或更新上一页组件的属性。下面是几种无需刷新页面的实现方案：

方案一：Session Storage临时存储数据 #

利用浏览器的sessionStorage在回退前存储变量，上一页组件在初始化时读取数据：

当前组件回退前存储变量 #

handleGoBack() {
    // 将变量转为JSON字符串存储，支持复杂类型
    sessionStorage.setItem('variableToSend', JSON.stringify(true));
    history.back();
}

目标组件读取并清理存储 #

在目标组件的connectedCallback中读取数据，用完后及时清理避免重复读取：

import { LightningElement, api } from 'lwc';

export default class ComponentToNavigate extends LightningElement {
    @api variableToSend;

    connectedCallback() {
        const storedVar = sessionStorage.getItem('variableToSend');
        if (storedVar) {
            this.variableToSend = JSON.parse(storedVar);
            // 清理存储，防止后续页面误读
            sessionStorage.removeItem('variableToSend');
        }
    }
}

注：sessionStorage是会话级存储，仅在当前标签页有效，关闭标签页后数据自动清除。

方案二：自定义事件跨组件通信（适用于组件有层级关联的场景） #

如果当前组件是目标组件的子组件（比如弹窗、内嵌组件），可以通过自定义事件传递变量后再执行回退：

目标组件暴露接收变量的API并监听事件 #

import { LightningElement, api } from 'lwc';

export default class ComponentToNavigate extends LightningElement {
    _variableToSend;

    @api
    set variableToSend(value) {
        this._variableToSend = value;
        // 变量更新后的业务逻辑写在这里
    }
    get variableToSend() {
        return this._variableToSend;
    }

    connectedCallback() {
        this.addEventListener('updatevariable', this.handleVariableUpdate);
    }

    handleVariableUpdate = (event) => {
        this.variableToSend = event.detail.variableToSend;
    }
}

当前组件触发事件并回退 #

handleGoBack() {
    // 派发自定义事件，bubbles和composed确保事件能穿透到上层组件
    this.dispatchEvent(new CustomEvent('updatevariable', {
        detail: { variableToSend: true },
        bubbles: true,
        composed: true
    }));
    history.back();
}

方案三：修改历史记录状态（history.replaceState） #

在跳转到当前页面时，将需要回传的变量存入历史记录状态，回退时目标组件通过popstate事件读取：

跳转时更新历史状态 #

在原NavigationMixin.Navigate的跳转逻辑后，添加历史状态更新：

this.var1 = false;
const compDefinition = {
    componentDef: "c:Component-to-navigate",
    attributes: {
        leadId: this.someLeadId,
        someId: this.someId,                   
        variableToSend: true
    }
};
const encodedCompDef = btoa(JSON.stringify(compDefinition));
this[NavigationMixin.Navigate]({
    type: 'standard__webPage',
    attributes: {
        url: '/one/one.app#' + encodedCompDef
    }
}).then(() => {
    // 跳转成功后，更新当前历史记录的状态数据
    history.replaceState({ variableToSend: true }, '', window.location.href);
});

目标组件监听popstate事件读取状态 #

import { LightningElement, api } from 'lwc';

export default class ComponentToNavigate extends LightningElement {
    @api variableToSend;

    connectedCallback() {
        window.addEventListener('popstate', this.handlePopState);
    }

    disconnectedCallback() {
        // 组件销毁时移除监听，避免内存泄漏
        window.removeEventListener('popstate', this.handlePopState);
    }

    handlePopState = (event) => {
        if (event.state?.variableToSend) {
            this.variableToSend = event.state.variableToSend;
        }
    }
}

注：这种方式依赖浏览器历史栈的状态，若用户在当前页面触发了其他修改历史栈的操作，可能会影响数据读取的准确性。

内容的提问来源于stack exchange，提问作者Gon