[Thymeleaf] button th:onclick으로 페이지 이동하기

CSS에서는 button 태그를 눌렀을 때 페이지를 이동하기 위해 

<button onclick="location.href='이동할 파일'">로 작성하면 되는데,

 

스프링 부트에서도 똑같이 작성했더니 이동하지 않았다 . . . 😢

 

그래서 th:onclick을 이용했는데, 겹치는 따옴표와 이스케이프 문 사용으로 작성도 헷갈리고 보기에도 어려워

 

간단한 방법을 이용했다. 

 

바로 기호 | 를 이용하는 것이다😊 (Enter 바로 위의 자판을 Shift 키와 함께 적은 것)

<input type="button" th:onclick="|location.href='@{join}'|" value="회원가입" id="join">

<input type="button" th:onclick="|location.href='@{이동할 url}'|"> 

 

@{ } 안에 적은 url이 localhost:8080 뒤에 붙어서

 

<input type="button" th:onclick="|location.href='@{abc}'|">

→ localhost:8080/abc 페이지로 이동하게 된다.

 

만약 첫 index 페이지로 이동하고 싶다면 <input type="button" th:onclick="|location.href='@{/}'|">로 적어주면 된다👍🏻