[Vue3] 마운트 후에 route params undefined 뜨는 현상 해결

에러

methodes 구역에 initCatnum 함수를 등록해주고 mounted 구역에서 함수를 호출하려고 하는 경우에 자꾸 위 같은 에러가 났다. params 값을 못 읽어서 생긴 에러였다.

 

원인

함수 스코프 안에서 this를 사용하니까 this 바인딩이 잘못 되서 난 에러같다.

 

해결

created 훅에서 this.$route.params.cat3 값을 vuex 상태변수로 등록해준 후

다시 함수 스코프 안에서 vuex 변수를 사용했을 경우 이상없이 값이 잘 가져와졌고, 에러가 해결됐다.

찾다보니 route guard를 쓰라는 말도 있고 했는데 그냥 상태변수 등록해서 쓰는게 제일 편한 방법 같다.

 

❤️‍ 결과 화면 ❤️‍

에러가 사라졌고, gnb 클릭후 내가 도달한 페이지 파라미터값에 따라 해당되는 lnb에 on 클래스가 적용된다.