현재 경로와 query를 반응형으로 읽고 검증합니다.
useRoute는 현재 route의 path, params, query를 제공합니다. 검색과 필터처럼 공유할 상태는 URL에 두고 문자열·배열 가능성을 검증합니다.
route 객체 전체보다 필요한 속성을 computed로 읽어 의존성을 좁힙니다.
민감정보를 query에 넣으면 기록과 로그에 남을 수 있습니다.
query 값이 항상 문자열 하나라고 단정하지 마세요.
로컬 프로젝트에서 확인해보세요page query를 양의 정수로 변환하고 잘못된 값은 1로 처리하세요.
<script setup>
const route = useRoute();
const query = computed(() => (typeof route.query.q === "string" ? route.query.q : ""));
</script>
<template>
<main>
<h1>현재 경로 {{ route.path }}</h1>
<p>검색어: {{ query || "전체" }}</p>
</main>
</template>