[Vue/Router] 새로고침 없이 params 동적 라우트 매칭

Vue2 + Vuetify2로 프로젝트 진행 중
v-navigation-drawer있는 v-list-item에 link 속성을 추가하고
동적 라우트를 to 속성으로 지정했더니
새로고침은 되지 않고 주소만 바뀌는 상황이 생겼다 😱

그래서 href 속성으로 바꾸었더니
새로고침 되면서 해당 동적라우트 링크로 이동하였다

이대로 둘까 싶었지만
nav바를 유지하면서 컨테이너 부분 내용만 리렌더링 하고 싶어서
구글링하여 해결 완료!

해결방법

해결 방법으로는 두 가지가 있는데

1. watch()로 $route 감시
2. beforeRouteUpdate() 가드 사용

나는 watch() 해결하였다.

 watch: {
    '$route' (to, from) {
      // 경로 변경에 반응하여...
    }
  }

참고링크
https://v3.router.vuejs.org/kr/guide/essentials/dynamic-matching.html