Translate

[Vue.js] router-link 동일한 링크 클릭 시 강제로 reload 하기






현재 보고있는 화면의 메뉴를 누르면 화면이 해당 메뉴에 처음 들어갔을때와 같이 보여줘야 한다는 요구사항이 있었다.



증상
1004lucifer
 - Vue 에서 기본적으로 현재 페이지는 링크를 눌러도 router-view 가 다시 로드되지 않는다.










개선
1004lucifer
 - 현재 보고있는 페이지의 링크(router-link)를 클릭 시 강제로 router-view 를 새로 로드하도록 수정을 했다.
 - 클릭한 링크의 URL이 현재 페이지라면 뒤에 인덱스 번호를 붙여서 이동하도록 수정함.





댓글

  1. 안녕하세요. vue router로 동일한 페이지 호출하는거 찾아보다가 궁금한게 생겨서 댓글 남깁니다!! 강제적으로 증가하는 숫자를 부여해도 문제가 없는건가요?

    답글삭제
    답글
    1. 프로젝트 상황에 따라 다르겠지만..
      일반적인 상황에서는 문제되는게 없다고 생각합니다.

      삭제
  2. 안그래도 이 부분 때문에 옛날 Vue 책 뒤져보고 있는데 조금 자세히 설명해주실 수 있나요? 강제로 페이지 새로고침 시키자니 깜빡이게 하기는 싫어서 중첩 라우팅도 써봤는데 결국에는 실패해서 이리저리 인터넷 찾아보고 있어요ㅠㅠ

    답글삭제
    답글
    1. URL 뒤에 의미없는 파라미터를 추가(변경)해서 계속 URL을 바꿔주는거예요.
      Vue 입장에서는 새로운 요청으로 인지를 할 수 있도록요..

      삭제
    2. 오 성공했어요 원리를 가르쳐주시니까 덕분에 쉽게했네요ㅎㅎ사용자들은 url 뒤에 숫자 붙는거 별로 신경 안쓰겠지 싶어서 이렇게 처리했어요ㅎㅎ

      삭제
    3. 네~ 잘 해결했다고 하시니 다행이네요~ㅎㅎㅎ

      삭제

댓글 쓰기