目标：固定顶部或者左侧导航，点击导航动态更新中间content区域的页面，也就是在放一个div在页面上，把html加载到div里，以前类似的实现都是通过Iframe或者js实现，在使用springboot+thymeleaf后，以前的办法有点过时。
步骤一：
添加依赖
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
步骤二：确定最外层模板，就是导航框架什么的，这里是index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" ------->关键的命名空间
xmlns="http://www.w3.org/1999/xhtml"
lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"></link>
<!--jquery要放在前面-->
<script src="/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script src="/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<title>index</title>
</head>
<body>
<nav );
});
})
</script>
</body>
</html>
步骤三：放入的页面，这里是list.html
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
xmlns="http://www.w3.org/1999/xhtml"
layout:decorator="index" -->这里是关键，指向index.html页面
>
<head>
<meta charset="UTF-8"/>
<title>List</title>
<!--在index模板中已经引入，div具备继承性-->
<!--<link rel="stylesheet" href="/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"></link>-->
<!--jquery要放在前面-->
<!--<script src="/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script>-->
<!--<script src="/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>-->
</head>
<body>
<div layout:fragment="content"> -->这里指向index.html里的<div class="container" layout:fragment="content">，替换里面内容
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>filesNo</th>
<th>customerName</th>
<th>agreementNum</th>
<th>agreementMoney</th>
<th>inRoomNum</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr th:each="customer : ${customers}">
<th scope="row" th:text="${customer.id}">1</th>
<td th:text="${customer.filesNo}">neo</td>
<td th:text="${customer.customerName}">Otto</td>
<td th:text="${customer.agreementNum}">6</td>
<td th:text="${customer.agreementMoney}">6</td>
<td th:text="${customer.inRoomNum}">6</td>
<td><a th:href="@{/toEdit(id=${customer.id})}">edit</a></td>
<td><a th:href="@{/delete(id=${customer.id})}">delete</a></td>
</tr>
</tbody>
</table>
<div class="container form-group">
<div class="col-sm-2 control-label">
<a href="/customer/add" th:href="@{/customer/add}" class="btn btn-info">add</a>
</div>
</div>
</div>
</body>
</html>
再加一个add.html页面
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
xmlns="http://www.w3.org/1999/xhtml"
layout:decorator="index"
>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div layout:fragment="content">
add!!!
</div>
</body>
</html>