Vue2 + Composition API (script setup) 조합으로 route watch 작성하기

아, 왜 이 조합으로 시작했는지 모르겠다.

그냥 Vue3 로 할걸.

 

 

아무튼 Vue2 에서 Composition API 를 이용하여 신규 프로젝트 작업 중.

 

script setup 으로 코드를 작성 중인데 router 를 이용하는데 문제가 생겼다.

(사실 사방팔방에서 문제다. vuex 도 그렇고 각종 플러그인들도 그렇고)

 

라우터가 변경될 때마다 실행되는 코드를 넣어야 하는데

script setup 을 사용하다 보니 this.$route 를 가져오지 못한다.

 

<script setup lang="ts">
watch(
  () => ???, // 뭘 넣어야 할까
  () => {
    // 작동
  },
  {
    immediate: true,
  }
);
</script>

이런 상황.

 

아무리 인터넷을 찾아봐도 모르겠다.

 

아무래도 Vue2 + Composition API (with script setup) 조합을 사용하는 괴랄한 사람이 별로 없어서겠지.

 

결국 코드를 하나씩 찍어보면서,

찾아냈다.

 

 

// rotuer/index.ts

const routes: Array<RouteConfig> = [
  // 라우터
];

const router = new VueRouter({
  linkActiveClass: "active",
  linkExactActiveClass: "exact",
  routes,
});

라우터 설정 파일을

 

<!-- App.vue -->

<script setup lang="ts">
import router from "@/router";

watch(
  () => router.app.$route,
  () => {
    // 작동
  },
  {
    immediate: true,
  }
);
</script>

Vue 파일에서 가져온다.

그리고 router.app.$route 로 감시하면 정상적으로 작동한다.

 

저 $route 를 이용해 resolve 나 matched 같은 것도 참조할 수 있다.

 

이제 vuex 와 각종 플러그인들과의 싸움도 해야지.