[Vue] 같은 컴포넌트이지만, 새로고침을 하고 싶을 때

상황

같은 컴포넌트를 사용하지만, URL만 바뀌여서 새로 rendering이 안되는 상황

하지만 새로운 URL로 페이지를 바꿔주고 싶은 상황

this.$router.push(`/api-doc/${api_path_id}`)

위의 코드로 실행하니, URL은 수정이 되는데 페이지는 전혀 변동이 없다.

Data의 변동도 없어서 보니, Created가 실행안되는 상황이었다.

---

해결방법

Watch를 $route에 걸어주었다.

$route(URL)이 바뀌면서 새로 데이터를 받아오도록 설정했다.

새로고침 할 필요없이, 새로 데이터를 받아오고 뿌려주었다.

  watch: {
    $route() {
      this.pending = true
      const query = this.$route.params.apiId
      this.init(query).then(() => {
        this.pending = false
      })
    }
  },