[ Vue ] 컴포넌트 내에서 라우터 변경 감지하기

 

  문제  

 

화면이 바뀌면 메뉴창이 닫히는 부분 구현 중,

 

모바일 메뉴는 누르면 화면을 차지하면서 뜨는 메뉴였는데

path자체가 바뀌는 경우는 재렌더 되면서 메뉴가 닫혔으나

query만 바뀌는 경우에는 렌더가 일어나지 않아서 메뉴가 닫히지 않아

이러면 일일히 닫아주는 함수를 작성해야 하나 싶었다.

 



this.$route를 console에 찍어 본 결과는 위와 같았다

 

 

  해결  

 

결론적으로 route가 변경되는 순간을 감지해서 메뉴창을 닫아주기로 했다.

그리고 모바일에서만 일어나면 되는 일이므로 괜히 pc에서 리소스 낭비가 될까봐 width값을 조건으로 걸어주었다

 

export default {
  watch:{
    $route(){
        const width = window.innerWidth
        if (width <= 1023)this.closeMoMenu()
        // route변경되면 모바일일때 메뉴화면 사라짐
      }
    }
  }

 

  알게 된 점  

 

1. watch에 $route를 추가해 줄 수 있다.

2. query만 바뀌는 경우는 랜더가 일어나지 않는다.