|
一、获取项目路径contextPath
将下面代码写到共用的html中
?
let context = [[@{/}]]
//这种方法Javascript汇报错，导致了在idea中，
//只要在{后面回车，就会自动增加一个}所以可以采用下一个方法
?/*<![CDATA[*/
? ?context = /*[[@{/}]]*/ '';
?/*]]>*/
?//这样不会报错，也能正常使用
二、创建共用HTML，可以将HTML中任意模块引入到你想要引入的页面
这个需要用到两个thymeleaf的命令
th:fragment和th:replace
th:fragment 是给你HTML中的某个区域加上一个标识
th:replace 就是将th:fragment定义的内容引入到别的html中
如下代码：
<div th:fragment="hello">
hello world
</div>
<div th:replace="common :: hello">
</div>
?th:replace 有两个参数，第一个common，就是你公共文件的名字，如果前面有路径就加上路径，建议就放在根目录下。第二个参数hello，就是common中你要引用的区域。
同时第二个参数后面，又可以加上单独的参数，可以用于特殊的动态引用。
如下代码：
<div th:fragment="hello(opt)">
<div th:text="${opt}"></div>
</div>
<div th:replace="common :: hello('china')">
</div>
如果两边参数没有对应上的话，就会直接报错。然后也可以和vue配合，动态显示你想要的东西。
三、可以和其他标签的属性搭配
th:xxx 是thymeleaf的用法，这不仅可以使用themeleaf原来的属性，还可以和其他标签搭配使用。这样，其他标签也得到了thymeleaf的能力。
比如一个a标签的href属性，如果单独使用的话，是没有办法使用th的能力的。但是在前面加上th:href就可以获得th的能力，可以使用[[@{/}]]获得项目路径。
不仅仅可以和原生的html属性搭配，还可以和vue的属性搭配。
比如上面的动态参数，如果想要动态显示隐藏的话，vue中是没有办法直接拿到参数opt的。并且使用th:style也是不生效的（我也不知道为什么），但是和vue中的v-show搭配就可以实现。
这就需要和v-show搭配，比如：th:v-show="${opt}=='china'?true:false"这样就可以显示隐藏不同的内容了。
|