[Vue]공통 컴포넌트로 내용이 다른 게시물로 이동시, 해당 내용이 안 보여지는 현상

문제 발생

메뉴에서 서로 다른 게시물로 이동하면, 첫번째 눌렀던 게시물은 잘 이동되지만, 그 상태에서 두번째 게시물로 위 링크는 바뀌지만 해당 내용은 안 바뀌는 모습을 발견 할 수 있었다. 

/Detail/34
/Detail/45

문제 원인

라우터 뷰가 동일한 컴포넌트를 보여주고 있다고 인식하기 때문이다. 즉 공통 컴포넌트를 제작하였기 때문에 보여주는 데이터와 별개로 동일한 컴포넌트를 보여주고 있다고 인식을 하는 것이다. 이런 문제를 해결하기 위해서 키를 사용하여 경로값을 변경해주면 구성요소가 리로드되게 하면 된다.

 해결 방법

router view에 key를 바인딩해주면 된다. key를 통해 경로 객체 속성을 강제로 연결 시켜주는데, 보여지는 화면에 쿼리 및 해시가 포함된 전체 url을 연결하여 쿼리스트링이 변경될때마다 페이지를 다시 리로드해서 노출시키는 방법이다.  

(route.fullpath는 쿼리 및 해시를 포함한 전체 확인 URL입니다.)

아래처럼 routerview가 선언된 곳에서 키를 넣어주면 된다. 

<router-view :key="$route.fullPath"/>
<RouterView :key="$route.fullPath" />