[Vue3] router (Hash Mode, Navigation Guards) 정리

Vue3의 라우터 설정 중 Hash mode vs HTML5 mode와 Navigation Guards에 대해 자세히 알아봅니다.

---

1️⃣ Hash mode vs HTML5 mode

1-1. HTML5 Mode (기본 설정)

• 설정 예시:

  import { createRouter, createWebHistory } from 'vue-router'
  
  const router = createRouter({
    history: createWebHistory(),
    routes,
  })
  

• 특징:
  • URL에 #/이 없이 깔끔하게 경로가 표시됩니다.
  • 누군가 /detail과 같이 URL을 직접 입력하면, Vue 라우터가 아니라 서버에 요청하게 됩니다.
  • 서버가 해당 경로에 맞는 페이지를 제공하지 않으면 404 에러가 발생할 수 있으므로, 서버에서 "모든 요청은 Vue가 처리하도록" 리다이렉트 설정을 해주어야 합니다.

1-2. Hash Mode

• 설정 예시:

  import { createRouter, createWebHashHistory } from 'vue-router'
  
  const router = createRouter({
    history: createWebHashHistory(),
    routes,
  })
  

• 특징:
  • URL에 # 기호가 포함됩니다. 예: codingapple.com/#/detail
  • # 뒤의 내용은 서버로 전달되지 않으므로, 라우팅 처리를 전적으로 Vue 라우터가 담당합니다.
  • 서버 설정 없이도 라우팅 충돌이나 404 에러 없이 클라이언트 측 라우팅을 안전하게 구현할 수 있습니다.
  • 서버가 없는 환경이나 간단한 SPA 프로젝트에서 유용합니다.

---

2️⃣ Navigation Guards

라우팅이 변경되기 전이나 후에 특정 코드를 실행할 필요가 있을 때 Navigation Guards를 사용합니다. 주로 로그인 여부 확인, 권한 검증 등 페이지 접근 제어에 활용됩니다.

2-1. 개별 라우트에 가드 설정하기

• 예제: /hello 경로에 접근하기 전에 로그인 여부를 확인하여, 로그인하지 않은 경우 /login 페이지로 리다이렉트하는 경우

  const routes = [
    {
      path: "/hello",
      component: HelloWorld,
      beforeEnter: (to, from) => {
        if (로그인했냐 === false) {
          return '/login'
        }
        // 별도의 return이 없으면 정상적으로 /hello로 이동
      }
    }
  ];
  

• 파라미터 설명:
  • to: 이동할(목적지) 라우트 정보 (예: to.fullPath, to.params.id)
  • from: 출발 라우트 정보

참고: 라우터를 통한 검증은 클라이언트 측 보안만을 위한 것이므로, 실제 서비스에서는 서버에서도 반드시 인증 검증을 해야 합니다.

2-2. 전역 Navigation Guards 사용하기

• 전역 가드 (모든 라우트에 적용):

  const router = createRouter({
    // ...기타 설정
  })
  
  router.beforeEach((to, from) => {
    // 페이지 변경 전에 실행할 코드
    // 예: 로그인 여부, 권한 체크 등
  })
  

• 다른 가드 종류:
  • beforeResolve(): 라우팅이 최종 결정되기 전에 실행
  • afterEach(): 라우팅이 완료된 후 실행 (비동기 처리는 불가능)

2-3. Vue 컴포넌트 내에서 Navigation Guards 사용하기

• 컴포넌트 내 가드 메서드: Vue 파일 내에서도 라우트 전환 시 특정 작업을 실행할 수 있습니다.
  • beforeRouteEnter(to, from, next) { }
  • beforeRouteUpdate(to, from, next) { }
• 사용 예:
  • 컴포넌트가 생성되기 전에 AJAX 요청을 보내거나, 데이터 로딩 등의 작업을 수행할 수 있습니다.
  • to와 from 파라미터를 사용하여 현재 경로 및 변경 전 경로에 접근 가능합니다.

---

📌 정리

• HTML5 Mode vs Hash Mode
  • HTML5 Mode: 깔끔한 URL을 제공하지만, 서버 설정이 필요합니다.
  • Hash Mode: URL에 #가 포함되지만, 서버 설정 없이 클라이언트 라우팅을 안전하게 처리할 수 있습니다.
• Navigation Guards
  • 개별 라우트 및 전역 가드를 통해 라우팅 전에 다양한 로직(예: 로그인 체크)을 실행할 수 있습니다.
  • 컴포넌트 내부에서도 가드를 사용할 수 있어, 라우팅 전후로 필요한 작업을 수행할 수 있습니다.

더 자세한 내용은 Vue Router 4 공식 문서를 참고.