Nuxt(Vue.js)中a标签绑定含双https的联盟推广链接不显示如何解决

你遇到的a标签不渲染问题，本质是gift.url_affiliate中的参数值ued=https://xxx未做URL编码，属于不符合规范的URL格式：
URL的查询参数值中出现:、/、?等特殊字符时，必须经过编码处理，否则会被Nuxt内置的URL合法性校验、XSS安全过滤策略判定为无效链接，直接过滤对应的a标签节点。

分两种场景处理：

场景1：可控制gift.url_affiliate的生成逻辑 #

直接在生成该链接的后端/数据源侧，对ued参数的取值做URL编码即可：
编码后的ued参数格式应为ued=https%3A%2F%2Fwww.onepiece.fr%2Ffr-fr%2Fcombinaisons%2Fclassiques-de-lhiver%2Falpine-jumpsuit-black-2，整个链接符合URL规范后Nuxt即可正常解析渲染。

场景2：无法修改数据源的链接输出 #

在Nuxt前端侧对绑定的URL做手动编码处理，将查询参数部分的特殊字符转义：

// 定义工具方法处理URL
function encodeAffiliateUrl(rawUrl) {
  try {
    const url = new URL(rawUrl)
    // 遍历所有查询参数，自动对值做标准编码
    for (const [key, value] of url.searchParams.entries()) {
      url.searchParams.set(key, value)
    }
    return url.toString()
  } catch (e) {
    // 异常兜底返回原字符串避免渲染失败
    return rawUrl
  }
}

然后修改模板中的href绑定逻辑：

<a :href="encodeAffiliateUrl(gift.url_affiliate)" target="_blank" class="mr-2">Go to market</a>

调试建议 #

如果修复后仍有异常，可以临时增加调试代码确认链接处理是否正常：

<!-- 调试用，打印处理前后的URL到页面 -->
<div>原URL：{{gift.url_affiliate}}</div>
<div>处理后URL：{{encodeAffiliateUrl(gift.url_affiliate)}}</div>

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