thymeleaf在引入片段的时候加入参数，使菜单动态高亮

1、为了管理起来方便，我们把所有公共片段全部放入一个HTML文件中。

有两种方式引入

方法一：在源片段中添加 th:fragment=“片段名”

<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">[[${session.username}]]</a>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="#">Sign out</a>
        </li>
    </ul>
</nav>

在引入的时候使用

<div th:replace="~{commons/navbars::topbar}"></div>

方法二：在源片中使用ID号

<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" id="topbar">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">[[${session.username}]]</a>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="#">Sign out</a>
        </li>
    </ul>
</nav>

在引入的时候使用

<div th:replace="~{commons/navbars::#topbar}"></div>

2、在片段源中加入判断，如果引入的链接参数是main则……

<li class="nav-item">
    <a class="nav-link active" href="#" th:href="@{/main}" th:class="${activeUrl=='main' ? 'nav-link active' : 'nav-link'}">
        <span data-feather="home"></span>
        数字仪表盘<span class="sr-only">(current)</span>
    </a>
</li>

3、在引入片段的地方加入参数，参数可以多个，用英文’,'隔开

<div th:replace="~{commons/navbars::#leftbar(activeUrl='main')}"></div>

以上方式可以实现，当引入某个片段后，加入参数即可动态实现菜单高亮。