[Vue] 동적라우팅 route변화 감지

동적 라우팅의 문제점

---

동일한 레이아웃에 데이터만 달라질 경우 동일한 component를 재사용하는 것이 효율적이다.
한 개의 component에 params로 구분해 데이터 값만 변경하면 된다.
그런데 한번 렌더링 된 component는 route가 변경되더라도 라이프사이클 훅을 한번 더 호출하지 않아 문제가 발생한다. 예를 들어 라우터 1로 렌더링 된 component는 다음 라우터 2가 랜더링 될 때 라이프사이클 훅이 호출되지 않아 component는 params가 바뀐지 몰라 created 등이 실행되지 않는다.

 

문제 해결

---

router-link 코드

<router-link :to="{ name: 'home', params: { index: 'first' } }">라우터1</router-link>
<router-link :to="{ name: 'home', params: { index: 'second' } }">라우터2</router-link>

👉 <router-link :to="{ name: 'home', params: { index: 'first' } }">라우터1</router-link>

라우터 1, 라우터 2는 home component를 같이 사용한다. component를 같이 사용을 하지만 사용자가 라우터 1에 접속했을 때랑 라우터 2에 접속했을 때 서로 다른 데이터를 출력한다.

 

라우터 1과 라우터 2를 구분 지어주기 위해 params의 값을 각기 다르게 하여 component에게 넘겨준다.
그럼 params의 값에 따라 서버는 다른 데이터를 넘겨주면 된다.

 

위에서 말했지만 사용자가 라우터 1 클릭 -> 라우터 2 클릭을 해도 이미 생성된 라우터 1의 component에서는 변경된 params('second')를 알지 못한다.

 

watch로 route변화 감지

export default {
  created() {
   this.data(this.$route.params.index);
  },
  methods: {
   data(index) {
     console.log(index);
   },
  },
  watch: {
   $route(to, form) {
     if (to.path !== form.path) this.data(this.$route.params.index);
   },
  },
};

👉 $route(to, form) {}

route가 변경되는지 확인하기 위해 $route로 작성하면 된다.

 

👉 if (to.path !== form.path) this.data(this.$route.params.index)

to.patch는 변경 전 route patch, form.path는 변경 전 patch 경로를 의미한다.
patch가 변경 전과 변경 후 가 다르면 data 메서드를 실행하면서 현재 route의 params를 넘긴다.

 

👉 this.data(this.$route.params.index)

home compoent가 처음으로 생성될 경우 route값을 data에 넘긴다.
만약, component가 생성 시 route값을 넘기지 않는다면 watch에서 현재 route값을 알 수 없어 watch가 작동되지 않으니 주의해야 된다. (이걸로 약간의 삽질을 했다능......🤨)

 

👉 data(index) { ... }

watch로 인해 params가 변경될 때마다 실행된다.
data메서드에서 서버로 요청하는 로직을 구현하여 params에 따른 데이터를 받아오면 된다.

 

Reference

---

http://router.vuejs.org/kr/guide/essentials/dynamic-matching.html

http://jeonghwan-kim.github.io/2018/04/07/vue-router.html