Vue Router

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/Home.vue'),
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('@/views/About.vue'),
    },
    {
      path: '/users/:id',
      name: 'user-detail',
      component: () => import('@/views/UserDetail.vue'),
      props: true, // params를 props로 전달
    },
    {
      path: '/:pathMatch(.*)*',
      name: 'not-found',
      component: () => import('@/views/NotFound.vue'),
    },
  ],
});

export default router;

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

const route = useRoute();     // 현재 라우트 정보
const router = useRouter();   // 프로그래밍 방식 이동

// URL 파라미터 읽기: /users/42 → id = "42"
const userId = route.params.id;

// 쿼리 파라미터: /search?q=vue → q = "vue"
const query = route.query.q;

// 프로그래밍 방식 이동
function goToUser(id: number) {
  router.push({ name: 'user-detail', params: { id } });
}

function goBack() {
  router.back();
}
</script>

<template>
  <nav>
    <!-- 선언적 네비게이션 -->
    <RouterLink to="/">홈</RouterLink>
    <RouterLink :to="{ name: 'about' }">소개</RouterLink>

    <!-- active 클래스 자동 추가됨 -->
    <RouterLink
      to="/users"
      active-class="font-bold text-blue-600"
    >
      사용자
    </RouterLink>
  </nav>

  <!-- 매칭된 컴포넌트가 여기에 렌더링 -->
  <RouterView />
</template>

// 전역 가드 — 모든 라우트 이동 전 실행
router.beforeEach((to, from) => {
  const isAuthenticated = checkAuth();

  if (to.meta.requiresAuth && !isAuthenticated) {
    // 로그인 페이지로 리다이렉트
    return { name: 'login', query: { redirect: to.fullPath } };
  }
});

// 라우트별 가드
{
  path: '/admin',
  component: AdminPanel,
  meta: { requiresAuth: true, role: 'admin' },
  beforeEnter: (to) => {
    const user = getUser();
    if (user?.role !== 'admin') {
      return { name: 'forbidden' };
    }
  },
}