一、th:href概述
在使用Thymeleaf进行Web开发时，通过 th:href 属性可以为HTML标签设定超链接。th:href 的值可以是文字、变量或表达式等。
当值为文字时，th:href 会把该文字指定为超链接的URL。当值为变量或表达式时，th:href 先把该变量或表达式的返回值转换为字符串，再作为超链接的URL。th:href 可以在 <a> 标签中使用。
/* 值为文字 */
<a th:href="@{http://example.com}">Example</a>
/* 值为变量 */
<a th:href="@{${item.url}}">Example</a>
/* 值为表达式 */
<a th:href="@{${'/view/'+item.id}}">Example</a>
二、th:href的URL处理
th:href 支持相对路径、绝对URL和上下文相对URL。
1. 相对路径
相对路径指的是超链接的URL相对于当前URL的位置。通常情况下，相对路径比绝对URL更容易维护。th:href 支持相对路径的写法。
/* 当前URL为http://example.com/shop/index.html */
<a th:href="@{'/shop/cart.html'}">My Cart</a> /* 相对路径 */
2. 绝对URL
绝对URL指的是包括URL协议在内的完整URL地址。例如，http://example.com/shop/cart.html。当使用绝对URL时，可以省略协议和主机名（例如：//example.com/shop/cart.html）。
<a th:href="@{'https://example.com/shop/cart.html'}">My Cart</a> /* 完整URL */
<a th:href="@{'//example.com/shop/cart.html'}">My Cart</a> /* 相对协议和主机名 */
3. 上下文相对URL
上下文相对URL指的是相对于Web应用程序的根目录的相对URL。在应用程序中使用上下文相对URL可以避免因为更改URL造成的无法链接的问题。
<a th:href="@{'~/shop/cart.html'}">My Cart</a> /* 上下文相对URL */
/* Controller代码 */
@GetMapping("/index")
public ModelAndView index() {
ModelAndView mav = new ModelAndView("index");
mav.addObject("path","~/shop/cart.html");
return mav;
}
/* index.html中使用变量 */
<a th:href="@{${path}}">My Cart</a>
三、th:href的数据绑定
可以使用变量或表达式作为 th:href 的值，这些值会被自动转换为字符串，并作为超链接的URL。当使用变量时，需要使用 ${} 来引用变量。当使用表达式时，需要使用 #{...} 来引用表达式。
1. 使用变量作为th:href
/* Controller代码 */
@GetMapping("/index")
public ModelAndView index() {
ModelAndView mav = new ModelAndView("index");
User user = new User();
user.setId(1);
user.setName("Lucy");
mav.addObject("user",user);
return mav;
}
/* index.html中使用变量 */
<a th:href="@{'/user/'+${user.id}}">User Info</a>
2. 使用表达式作为th:href
/* Controller代码 */
@GetMapping("/index")
public ModelAndView index() {
ModelAndView mav = new ModelAndView("index");
User user = new User();
user.setId(1);
user.setName("Lucy");
mav.addObject("user",user);
return mav;
}
/* index.html中使用表达式 */
<a th:href="@{'/user/'+#{user.id}}">User Info</a>
四、th:href的URL参数
th:href 还可以添加URL参数，用于传递额外的信息。URL参数的格式是 ?key=value，多个参数之间用 & 分隔。
/* 当前URL为http://example.com/shop/index.html */
<a th:href="@{'/shop/cart.html'}">My Cart</a> /* 无参数 */
<a th:href="@{'/shop/cart.html(orderId=${order.id})'}">My Cart</a> /* 单参数 */
<a th:href="@{'/shop/cart.html(orderId=${order.id},qty=${item.qty})'}">My Cart</a> /* 多参数 */
五、th:href的URL路径格式化
有时候，URL路径中需要替换某些字符。Thymeleaf提供了两种方式来进行URL路径格式化。
1. 使用'/'号进行格式化
/* Controller代码 */
@GetMapping("/index")
public ModelAndView index() {
ModelAndView mav = new ModelAndView("index");
User user = new User();
user.setId(1);
user.setName("Lucy");
mav.addObject("user",user);
return mav;
}
/* index.html中使用'/'号进行格式化 */
<a th:href="@{/user/{id}(id=${user.id})}">User Info</a>
2. 使用占位符进行格式化
/* Controller代码 */
@GetMapping("/index")
public ModelAndView index() {
ModelAndView mav = new ModelAndView("index");
User user = new User();
user.setId(1);
user.setName("Lucy");
mav.addObject("user",user);
return mav;
}
/* index.html中使用占位符进行格式化 */
<a th:href="@{'/user/{id}/info.html'(id=${user.id})}">User Info</a>
六、th:href的局部刷新
在开发Web应用时，可能需要使用Ajax技术实现局部刷新。Thymeleaf提供了 th:href 属性中新的特性，它可以为超链接添加局部刷新的功能。
/* Controller代码 */
@GetMapping("/index")
public ModelAndView index() {
ModelAndView mav = new ModelAndView("index");
User user = new User();
user.setId(1);
user.setName("Lucy");
mav.addObject("user",user);
return mav;
}
/* index.html中使用JS进行局部刷新 */
<a th:href="@{/user/{id}(id=${user.id})}"
th:attr="data-url=@{/user/info.ajax(id=${user.id})}"
onclick="loadData(this)">User Info</a>
/* JavaScript代码 */
function loadData(obj) {
var url = $(obj).data('url');
$.get(url,function (data) {
$('#user-info').html(data);
});
}
七、总结
通过本文的介绍，我们了解了 th:href 的概述、URL处理、数据绑定、URL参数、URL路径格式化和局部刷新等特性。th:href 是Web开发中必不可少的一个属性，掌握它的使用有助于提高Web开发效率。
