74 라우터 이동에서 컴포넌트 이동으로 수정 후 버그 픽스

source: categories/study/vue-experiance/vue-experiance_9-74.md

74 라우터 이동에서 컴포넌트 이동으로 수정 후 버그 픽스

1. 탭메뉴 이동을 라우터 이동이 아닌 컴포넌트 이동으로 수정 후
2. 파트 이동시 내용 업데이트 안되는 버그 발생

해결방법

• 파트 이동을 라우터로함. 그리고 파트 이동시 params의 id 값을 갱신
• watch로 해당 값 감시 및 api 요청

watch

export default {
  name: 'ExampleComponent',
  watch: {
    $route: {
      deep: true,
      immediate: true,
      handler(val) {
        this.paramSeq = val.params.id;
        this.getApi(); // api 호출 코드
      }
    }
  }
}

• params의 seq 값 갱신 후 api 요청 -> 데이터 다시 불러옴