Vue Router 심화

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

const router = createRouter({
  history: createWebHistory(),
  routes: [/* ... */]
})

// beforeEach — 모든 라우트 전환 전에 실행
router.beforeEach(async (to, from) => {
  const isAuthenticated = checkAuth()

  // 인증이 필요한 페이지인데 로그인하지 않은 경우
  if (to.meta.requiresAuth && !isAuthenticated) {
    // 로그인 페이지로 리다이렉트, 원래 가려던 경로를 쿼리로 전달
    return { name: 'login', query: { redirect: to.fullPath } }
  }

  // 이미 로그인한 상태에서 로그인 페이지 접근 시
  if (to.name === 'login' && isAuthenticated) {
    return { name: 'home' }
  }

  // undefined 또는 true를 반환하면 네비게이션 허용
})

// afterEach — 네비게이션 완료 후 실행 (네비게이션 변경 불가)
router.afterEach((to, from) => {
  // 페이지 제목 변경
  document.title = (to.meta.title as string) || '기본 제목'

  // 분석 추적
  // analytics.trackPageView(to.fullPath)
})

// beforeResolve — 모든 컴포넌트 가드와 비동기 라우트 해결 후 실행
router.beforeResolve(async (to) => {
  if (to.meta.requiresData) {
    try {
      await fetchRequiredData(to.params.id as string)
    } catch (error) {
      return { name: 'error' }
    }
  }
})

export default router

const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    // 이 라우트에만 적용되는 가드
    beforeEnter: (to, from) => {
      const hasPermission = checkPermission('dashboard')
      if (!hasPermission) {
        return { name: 'forbidden' }
      }
    }
  },

  // 여러 가드를 배열로 전달
  {
    path: '/admin',
    component: () => import('@/views/Admin.vue'),
    beforeEnter: [checkAuth, checkAdminRole, logAccess]
  }
]

// 가드 함수를 분리하여 재사용
function checkAuth(to, from) {
  if (!isAuthenticated()) {
    return { name: 'login', query: { redirect: to.fullPath } }
  }
}

function checkAdminRole(to, from) {
  if (getUserRole() !== 'admin') {
    return { name: 'forbidden' }
  }
}

<script setup lang="ts">
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'

const hasUnsavedChanges = ref(false)

// 라우트를 떠나기 전 — 저장하지 않은 변경사항 확인
onBeforeRouteLeave((to, from) => {
  if (hasUnsavedChanges.value) {
    const answer = window.confirm('저장하지 않은 변경사항이 있습니다. 정말 나가시겠습니까?')
    if (!answer) {
      return false  // 네비게이션 취소
    }
  }
})

// 같은 컴포넌트에서 라우트 파라미터만 변경될 때
onBeforeRouteUpdate(async (to, from) => {
  // /users/1 → /users/2
  // await fetchUser(to.params.id)
})
</script>

1. 이전 컴포넌트의 onBeforeRouteLeave
2. 전역 beforeEach
3. 재사용 컴포넌트의 onBeforeRouteUpdate
4. 라우트의 beforeEnter
5. 비동기 컴포넌트 해결
6. 새 컴포넌트의 beforeRouteEnter (Options API)
7. 전역 beforeResolve
8. 네비게이션 확정
9. 전역 afterEach
10. DOM 업데이트

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // 뒤로/앞으로 가기 시 이전 스크롤 위치 복원
    if (savedPosition) {
      return savedPosition
    }

    // 해시(앵커) 이동
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth'  // 부드러운 스크롤
      }
    }

    // 기본: 페이지 상단으로
    return { top: 0 }
  }
})

// 지연된 스크롤 — 트랜지션 완료 후 스크롤
scrollBehavior(to, from, savedPosition) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ top: 0 })
    }, 300)  // 트랜지션 시간만큼 대기
  })
}

<template>
  <RouterView v-slot="{ Component, route }">
    <Transition :name="route.meta.transition || 'fade'" mode="out-in">
      <component :is="Component" :key="route.path" />
    </Transition>
  </RouterView>
</template>

<style>
/* 페이드 전환 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 슬라이드 전환 */
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}

.slide-enter-from {
  transform: translateX(100%);
}

.slide-leave-to {
  transform: translateX(-100%);
}
</style>

<!-- 방법 1: 네비게이션 후 가져오기 -->
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const post = ref(null)
const loading = ref(true)
const error = ref(null)

const fetchPost = async (id: string) => {
  loading.value = true
  try {
    const res = await fetch(`/api/posts/${id}`)
    post.value = await res.json()
  } catch (e) {
    error.value = e
  } finally {
    loading.value = false
  }
}

watch(() => route.params.id, (id) => fetchPost(id as string), { immediate: true })
</script>

<template>
  <div v-if="loading">로딩 중...</div>
  <div v-else-if="error">에러 발생</div>
  <div v-else>{{ post }}</div>
</template>

// 런타임에 라우트 추가
const removeRoute = router.addRoute({
  path: '/dynamic',
  name: 'dynamic',
  component: () => import('@/views/DynamicView.vue')
})

// 추가된 라우트 제거
removeRoute()

// 이름으로 제거
router.removeRoute('dynamic')

// 현재 등록된 모든 라우트 확인
console.log(router.getRoutes())