[javascript] Vue Router의 이벤트 핸들링 방법

18 Dec 2023

javascript

Vue Router는 Vue.js 애플리케이션에서 라우팅을 지원하기 위한 공식 라우팅 라이브러리입니다. 여기에는 화면 전환 등의 이벤트를 핸들링하는 방법도 포함되어 있습니다. Vue Router를 사용하여 페이지 전환 시 이벤트를 처리하는 방법을 알아 보겠습니다.

1. 라우터 이벤트 감지

Vue Router는 다음과 같은 네 가지 타입의 네비게이션 가드를 제공합니다.

beforeEach
beforeResolve
afterEach
beforeEnter

이들 네비게이션 가드를 사용하여 라우팅 이벤트를 감지할 수 있습니다.

// 예제: beforeEach 네비게이션 가드를 사용하여 이벤트 감지
const router = new VueRouter({
  routes: [
    // 라우트 정의
  ]
})

router.beforeEach((to, from, next) => {
  // 여기에 이벤트 핸들링 로직 작성
  console.log('라우터 이벤트 감지')
  next()
})

2. 이벤트 핸들링

이벤트를 감지하고 나면, 해당 이벤트에 대한 처리 로직을 작성할 수 있습니다. 이때 beforeEach, beforeResolve, afterEach, beforeEnter 함수에서 next() 함수를 사용하여 페이지 전환을 허용하거나 중단할 수 있습니다.

// 예제: beforeEach 네비게이션 가드를 사용하여 핸들링
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    // 사용자 인증이 필요한 경우
    if (!auth.isAuthenticated) {
      // 인증되지 않은 경우, 로그인 페이지로 리다이렉트
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      // 인증된 경우, 페이지 이동 허용
      next()
    }
  } else {
    // 사용자 인증이 필요하지 않은 경우, 페이지 이동 허용
    next()
  }
})

3. 컴포넌트 단위 이벤트 핸들링

특정 컴포넌트에서 라우터 이벤트를 처리해야 하는 경우, activated, deactivated 라이프사이클 훅을 활용할 수 있습니다.

// 예제: activated, deactivated 라이프사이클 훅을 사용하여 이벤트 핸들링
export default {
  activated() {
    // 컴포넌트가 활성화될 때 실행되는 로직
    console.log('컴포넌트가 활성화됨')
  },
  deactivated() {
    // 컴포넌트가 비활성화될 때 실행되는 로직
    console.log('컴포넌트가 비활성화됨')
  }
}

Vue Router를 사용하여 화면 전환 등의 이벤트를 핸들링하는 방법에 대해 간단히 알아보았습니다. 이를 통해 더 다양한 사용자 경험을 제공할 수 있을 것입니다.

참고 자료: Vue Router - Navigation Guards

제안 및 피드백을 환영합니다!