【Thymeleaf】th:hrefをJavaScriptで使う

詰まったこと

th:hrefをJavaScriptで生成すると、機能しない。

Thymeleafでは、hrefを使うとき、次のような書き方をすると思います。

<a th:href="@{/hello}">サンプル</a>

html上では上手くいきますが、
これを次のようにJavaScriptで生成すると、機能しません。

<script type="text/javascript">
    target.html('<a th:href="@{/hello}">サンプル</a>');
</script>

困った。。。

解決法

①まず、scriptタグを書き換えます。

<script type="text/javascript" th:inline="javascript">

②リンクを定義します。

const link = /*[[@{/hello}]]*/'';

/helloを飛ばしたいリンクにしてください。

③　②で定義したリンクに書き換える。

target.html('<a href="' + link + '">サンプル</a>');

ここでのポイントは、

<a th:href...

とせずに、

<a href...

とすることです。

まとめると、

<script type="text/javascript" th:inline="javascript">
    const link = /*[[@{/hello}]]*/'';
    target.html('<a href="' + link + '">サンプル</a>');
</script>

パラメーターを付与したい時は？

パラメータを付与したい時、あると思います。
そんな時は、、、

const baselink = /*[[@{/samplek}]]*/'';
const link = baselink + "?id=" + id;
target.html('<a href="' + link + '">サンプル</a>');

上手くできました。

以上です。最後まで読んでくださり、ありがとうございました。

参考

Thymeleaf: Use a link with 'th:href' in Javascript