Vue router view :key="$route.fullPath"

 

 Router - view의 기능을 새로 발견했다🧐 

 

새로 알게된 기능을 기록하려고 한다. 막 엄청난 내용이 아니긴한데 그래도 기록해놓으면 오래 기억할 수 있으니깐! vue는 내장기능을 이용하여 싱글페이지 애플리케이션이 구현이 가능하다. 자주 포스팅 했던 router라는 기능이다. 그 중에서 오늘 알아볼 router-view는 태그의 추가 기능이며, 이것을 어떻게 사용하는지, 왜 쓰는지에 대해 작성해보려고 한다.

 

---

 

 페이지를 많이 만들다보면 마주치는 문제점! 

 

이 문제점은 하나의 카테고리에 있는 상품등을 클릭했을 때 발생하는 문제다. 예를 들어, 인터넷쇼핑몰에서 간식을 구매하려고 했을때, 보통 우리는 스낵/간식 카테고리에 들어가서 노출된 상품을 본다. 그리고 그 중 하나를 골라서 상세페이지로 들어간다. 이때 주소창을 보면 주소가 패스베리어블 또는 쿼리스트링으로 되어 있는걸 확인할 수 있다. API로 통신하며 누른 아이의 조건을 파람스로 넣어 보내는것인데, 이때까지는 문제가 없다. 문제는 지금부터다.

# 감자칩 페이지
/snack/test1

# 양파깡 페이지
/snack/test2

 

내가 감자칩 페이지를 이동하고 바로 양파깡 페이지로 이동한다고 하자. 그러면 페이지가 로드되지 않는다. 이때 다시 snack 페이지로 이동한 후, 양파깡 페이지로 이동하면 페이지는 정상적으로 작동한다. 도대체 무엇이 문제인걸까? 열심히 구글링을 해보니 해당 문제는 매우 간단한 방법으로 해결될 수 있었다. 바로 router view에 key를 바인딩하는것이다. 

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

key를 통해 경로 개체 속성을 강제로 연결시켜주는건데, 보여지는 화면에 쿼리 및 해시가 포함된 전체 URL을 연결하여 쿼리스트링이 변경될때마다, 그러니깐 탐색하는 이벤트가 발생할때 마다 페이지를 다시 리로드해서 노출시키는 방법이다.

 

문제를 해결하는 방법이 하나 더 있는데, 똑같이 key를 바인딩하지만 연결되는 경로개체가 다르다. 아래 방법은 절대 경로로 확인되는 경로를 다시 연결하여 노출시키는 방법이다. 

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

둘의 차이점을 말하자면, path는 패스베리어블이 변경될때마다 리로드를 하고, fullPath는 쿼리가 실행될때마다 리로드가 된다는 점같다. 이 부분은 뇌피셜이기 때문에 잘못된 정보일수도있다. 한번 실험해보고 나에게 맞는 방법을 사용하자!

 

 

라우터의 경로개체에 대해 정확하게 파악하진 못하고 있었는데 이런식으로도 응용이 가능하다는걸 깨달았다. 한번쯤은 전부 읽어보는것도 좋은 공부 방법이지 않을까싶다! 

 

 

---

 

 왜 이런 오류가 발생할까? 

 

원인은 라우터 뷰가 동일한 컴포넌트를 보여주고 있기때문이다. 우리에겐 다르다고 인식되고 있지만 어차피 해당 상품들은 같은 컴포넌트에 노출되는 페이지들이다. 하나의 상품에 들어갔을때, 페이지에 필요한 구성요소들은 로드가 완료된 상태가 된것이다. 그 상태에서 라우터링크를 클릭하여 이동을 해도, 이미 구성된 요소들은 제거되지 않고, 데이터를 다시 로드하지도 않는다. 기존 구성요소가 마운트가 완료되었기때문에 훅을 전환하지 않는다. 이런 원리때문에 URL이 변경된다하여도 페이지에 변화되는 데이터는 존재하지 않았던 것이다. 뷰의 라우터가 동일한 구성용소가 처리되는 경우 변경사항을 인식하지 못하는 것 같다. 이런 문제를 키를 사용하여 강제로 경로값을 변경해주면 구성요소가 리로드된다!

 

 

 

 

 

 

참고문서 : stackoverflow.com/questions/52847979/what-is-router-view-key-route-fullpath

What is ?

참고문서 : router.vuejs.org/api/#the-route-object

API Reference | Vue Router

참고문서 : laracasts.com/discuss/channels/vue/vue-2-reload-component-when-same-route-is-requested?page=1%20%EC%B6%9C%EC%B2%98:%20it77.tistory.com/386%20[%EC%8B%9C%EC%9B%90%ED%95%9C%\EB%AC%BC%EB%83%89%EC%9D%98%20%EC%82%AC%EB%9E%8C%EC%82%AC%EB%8A%94%20%EC%9D%B4%EC%95%BC%EA%B8%B0]

 

[Vue 2] Reload component when same route is requested