[Vue] Vue Router 네비게이션 가드

정상적인 페이지 이동을 막는 기능입니다.

 

src > router > index.js 

router를 설정한 파일 내에 작성합니다.

• beforeEach

router.beforeEach((to, from) => {
  console.log('to: ', to)      // 이동할 페이지 정보
  console.log('from: ', from)  // 이동하기 전의 페이지 정보
})

 

값으로 false, router path, router name을 반환할 수 있습니다.

router.beforeEach((to, from) => {
  console.log('to: ', to)      // 이동할 페이지 정보
  console.log('from: ', from)  // 이동하기 전의 페이지 정보
  
  if(to.name === 'myPage') {
    return false            // 페이지 이동 불가
    return { name: 'home' } // home으로 이동
    return '/login'         // login으로 이동
  }
})

 

router에 직접 가드하는 방법

• beforeEnter

{
  path: '/myPage',
  name: 'MyPage',
  component: MyPage,
  beforeEnter: (to, from) => {
    console.log('to: ', to)      // 이동할 페이지 정보
    console.log('from: ', from)  // 이동하기 전의 페이지 정보
  
    return false            // 페이지 이동 불가
    return { name: 'home' } // home으로 이동
    return '/login'         // login으로 이동
  }
}

 

Component에서 가드하는 방법

• beforeRouteEnter
• onBeforeRouteUpdate
• onBeforeRouteLeave

<script setup>
onBeforeRouteUpdate(() => {
  // 현재 router가 변경될 때
})

onBeforeRouteLeave(() => {
  // 현재 router를 떠날 때
})
</script>

<script>
export default {
  // setup보다 먼저 실행됩니다.
  // router에 진입하기 전
  beforeRouteEnter() {
  
  }
}
</script>