Vue 3 Composition API에서 라우터 사용하기

Vue 3의 Composition API(setup)에서는 this를 사용할 수 없어 라우터 접근 방식이 다릅니다. useRouter와 useRoute 컴포저블을 활용하는 방법을 알아봅니다.

1. 기본 설정

import { useRouter, useRoute } from "vue-router";

export default {
  setup() {
    const router = useRouter();  // 라우터 인스턴스
    const route = useRoute();    // 현재 라우트 정보
    
    return { router, route };
  }
}

2. 프로그래밍 방식 네비게이션

import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();
    
    // 경로로 이동
    const goToHome = () => {
      router.push("/");
    };
    
    // 이름으로 이동
    const goToUser = (id) => {
      router.push({ name: "User", params: { id } });
    };
    
    // 쿼리 파라미터 포함
    const search = (keyword) => {
      router.push({ 
        path: "/search", 
        query: { q: keyword } 
      });
    };
    
    // 히스토리 교체 (뒤로가기 불가)
    const replaceRoute = () => {
      router.replace("/new-page");
    };
    
    // 뒤로가기
    const goBack = () => {
      router.go(-1);
    };
    
    return { goToHome, goToUser, search, goBack };
  }
}

3. 현재 라우트 정보 접근

import { useRoute } from "vue-router";
import { computed } from "vue";

export default {
  setup() {
    const route = useRoute();
    
    // 현재 경로
    console.log(route.path);      // "/user/123"
    
    // URL 파라미터
    console.log(route.params.id); // "123"
    
    // 쿼리 스트링
    console.log(route.query.tab); // "profile"
    
    // 라우트 이름
    console.log(route.name);      // "UserDetail"
    
    // 반응형으로 감시
    const userId = computed(() => route.params.id);
    
    return { userId };
  }
}

4. 네비게이션 가드

import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";

export default {
  setup() {
    // 페이지 떠나기 전
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm("저장하지 않고 나가시겠습니까?");
      if (!answer) return false;
    });
    
    // 같은 컴포넌트 내 라우트 변경 시
    onBeforeRouteUpdate((to, from) => {
      console.log("라우트 업데이트:", to.params.id);
    });
  }
}

5. script setup 문법

<script setup>
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const navigate = () => {
  router.push("/dashboard");
};
</script>

Options API vs Composition API 비교

기능	Options API	Composition API
라우터	this.$router	useRouter()
라우트	this.$route	useRoute()
이동	this.$router.push()	router.push()

주의사항

• useRouter/useRoute는 반드시 setup() 내부에서 호출
• route 객체는 반응형이므로 watch 가능
• params 변경 감지 시 computed나 watch 활용