경로와 화면 컴포넌트의 매핑 및 이동을 이해합니다.
Vue Router는 routes 배열로 URL과 컴포넌트를 연결하고 history 구현을 선택합니다. 동적 segment, query, navigation guard의 책임을 구분합니다.
실제 앱에서는 createWebHistory를 사용하고 서버가 모든 경로를 index.html로 돌려주게 배포를 설정합니다.
권한 검사는 클라이언트 guard만 믿지 말고 서버 API에서도 수행합니다.
라우트 이름과 path를 섞어 하드코딩하면 경로 변경 영향이 커집니다.
로컬 프로젝트에서 확인해보세요/courses/:id 동적 경로를 추가하고 params를 확인하세요.
<script setup>
import { createRouter, createMemoryHistory } from "vue-router";
import { ref } from "vue";
const Home = { template: "<p>홈 화면</p>" },
Course = { template: "<p>강좌 화면</p>" };
const router = createRouter({
history: createMemoryHistory(),
routes: [
{ path: "/", component: Home },
{ path: "/course", component: Course },
],
});
const path = ref("/");
async function move(next) {
await router.push(next);
path.value = router.currentRoute.value.fullPath;
}
</script>
<template>
<main>
<h1>현재 경로 {{ path }}</h1>
<button @click="move('/')">홈</button><button @click="move('/course')">강좌</button>
</main>
</template>