如何基于JavaScript动态生成Thymeleaf的th:href实现Spring控制器跳转？

你的需求是完全可以实现的，不过得先搞清楚一个关键点：Thymeleaf的th:href是服务器端渲染的——也就是说，当页面发送到浏览器时，th:href已经被解析成了实际的URL（如果是按钮标签的话，这个th:*属性会被Thymeleaf直接移除，因为按钮本身没有href属性），所以你在JS里自然拿不到带@{}的原始模板值，这和冒号没关系哦。

下面给你两种常用的实现方式：

方式1：用data属性存储URL模板，JS替换参数 #

先在Thymeleaf里给按钮添加一个data-*属性，把带占位符的URL模板存进去，之后JS只需要替换占位符即可：

<!-- 用data-base-url存储模板，占位符用自定义标记，比如__YEAR__、__MONTH__ -->
<button id="jumpBtn" th:data-base-url="@{/grid/year/{year}/month/{month}(year='__YEAR__', month='__MONTH__')}">跳转到目标页面</button>

然后写JS逻辑，获取选中的年月后替换占位符，点击按钮时跳转：

// 假设你已经通过选中事件拿到了年份和月份
const selectedYear = 2016;
const selectedMonth = 12;

const jumpBtn = document.getElementById('jumpBtn');
// 从data属性里拿到模板URL
const urlTemplate = jumpBtn.dataset.baseUrl;
// 替换占位符生成最终URL
const targetUrl = urlTemplate.replace('__YEAR__', selectedYear).replace('__MONTH__', selectedMonth);

// 绑定点击事件跳转
jumpBtn.addEventListener('click', () => {
    window.location.href = targetUrl;
});

方式2：直接用JS拼接URL（更简洁） #

如果你的基础路径是固定的，也可以直接用JS拼接URL，同时用Thymeleaf的内联脚本获取正确的上下文路径，避免硬编码：

<button id="jumpBtn">跳转到目标页面</button>

<script>
// 用Thymeleaf内联脚本渲染基础路径，避免硬编码上下文
const basePath = /*[[@{/grid}]]*/ '';

// 假设选中的年月
const selectedYear = 2016;
const selectedMonth = 12;

document.getElementById('jumpBtn').addEventListener('click', () => {
    // 直接拼接URL
    const targetUrl = `${basePath}/year/${selectedYear}/month/${selectedMonth}`;
    window.location.href = targetUrl;
});
</script>

补充说明：为什么你之前拿不到th:href的值？ #

Thymeleaf在渲染页面时，会把所有th:*开头的属性处理成对应的标准HTML属性（比如th:href会变成普通的href，如果是a标签的话），或者直接移除这些th:*属性（比如按钮标签本身不支持href，所以th:href会被直接删掉）。所以在客户端的DOM里，根本不存在th:href这个属性，自然拿不到啦。

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