LWC表格按钮href拼接recordId失效，如何正确实现？

问题原因 #

你遇到的问题是误用了Aura框架的表达式语法{!acc.Id}，LWC不支持这种写法，导致该表达式被当作纯字符串处理，最终URL里出现转义后的%7B!acc.Id%7D，而非实际的记录ID。

解决方案 #

方案1：HTML模板直接拼接（简单场景推荐） #

在LWC HTML模板中，使用ES6模板字符串结合LWC属性绑定语法（{}）直接拼接URL，无需!符号。假设你通过for:each遍历账户列表，代码示例如下：

<template for:each={accounts} for:item="acc">
    <tr key={acc.Id}>
        <!-- Contact Broker 按钮 -->
        <td>
            <a href={`/i-need-a-broker/?BrokerId=${acc.Id}`} target="_self">Contact Broker</a>
        </td>
        <!-- View Details 按钮 -->
        <td>
            <a href={`/lightning/r/Account/${acc.Id}/view`} target="_self">View Details</a>
        </td>
    </tr>
</template>

这种方式直接在href属性中拼接acc.Id，能正确生成包含实际记录ID的URL。

方案2：JS中生成URL（复杂逻辑场景） #

如果URL拼接逻辑复杂或需要复用，可在JS文件中定义方法生成完整URL：

JS文件代码

import { LightningElement, api } from 'lwc';

export default class AccountTable extends LightningElement {
    @api accounts; // 接收父组件传递的账户列表

    // 生成Contact Broker跳转URL
    getContactBrokerUrl(accountId) {
        return `/i-need-a-broker/?BrokerId=${accountId}`;
    }

    // 生成View Details跳转URL
    getViewDetailsUrl(accountId) {
        return `/lightning/r/Account/${accountId}/view`;
    }
}

HTML模板调用

<template for:each={accounts} for:item="acc">
    <tr key={acc.Id}>
        <td>
            <a href={getContactBrokerUrl(acc.Id)} target="_self">Contact Broker</a>
        </td>
        <td>
            <a href={getViewDetailsUrl(acc.Id)} target="_self">View Details</a>
        </td>
    </tr>
</template>

注意事项 #

• 确认acc.Id存在有效值：可在模板中临时添加{acc.Id}输出测试，确保账户对象的Id属性正确传递。
• LWC仅支持{}属性绑定语法，不要混用Aura的{!}写法。
• 跳转外部网站需添加target="_blank"，Salesforce内部页面用target="_self"即可。

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