如何用Thymeleaf创建带参数且在新标签页打开的按钮链接？

我来帮你搞定这个问题！你遇到的核心问题是：直接在th:onclick里拼接${id}变量时，Thymeleaf无法正确解析这个表达式——因为这里的字符串会被当作原生JS代码处理，Thymeleaf不会自动识别其中的模板变量。下面给你几种靠谱的解决方案：

方法1：使用Thymeleaf JavaScript内联表达式 #

通过[[...]]语法让Thymeleaf解析变量并注入到JS代码中，这是最直接的修复方式：

<button th:onclick="window.open('https://www.google.com/location/' + [[${id}]])">GO</button>

[[${id}]]会被Thymeleaf替换成实际的id值，生成的JS代码就能正确拼接URL了。

方法2：使用th:attr与文本替换表达式 #

用th:attr动态生成onclick属性，配合Thymeleaf的文本替换语法|...|，可以更直观地拼接URL：

<button th:attr="onclick=|window.open('https://www.google.com/location/${id}')|">GO</button>

文本替换表达式会自动把${id}替换成对应的值，不需要手动做字符串拼接，代码可读性更高。

方法3：语义化方案——样式化的a标签 #

从语义角度来说，跳转链接更适合用<a>标签，我们可以把它样式化成按钮的样子，同时用Thymeleaf的URL表达式更优雅地处理参数：

<a th:href="@{https://www.google.com/location/{id}(id=${id})}" 
   target="_blank"
   style="display: inline-block; padding: 6px 12px; border: 1px solid #dee2e6; border-radius: 4px; background-color: #fff; text-decoration: none; color: #212529; cursor: pointer;">
    GO
</a>

• th:href="@{...}"是Thymeleaf的标准URL表达式，能自动处理参数拼接
• target="_blank"直接实现新标签页打开
• 内联样式可以替换成你项目中的按钮CSS类，保持样式统一

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