[Vue] 네비게이션 가드 / Navigation Guards

소개

네비게이션 가드는 주로 리디렉션 하거나 취소하여 네비게이션을 보호하는 데 사용된다.

네비게이션 가드를 설정하는 방법에는 전역, 라우트 내부, 컴포넌트 내부가 있다.

 

 

 

 

전역 가드

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

 

각 route 들이 호출될 때마다 실행되는 네비게이션 가드 입니다.

 

• to :     대상 Route 객체
• from : 현재 Route 객체
• next : 훅을 해결하기 위한 함수

next()	다음 훅으로 이동
next(false)	현재 네비게이션 중단, from 경로의 URL로 재설정
next('/') or next({ path : '/' })	해당 위치로 리디렉션
next(error) : 2.4.0 이후 추가	탐색이 중단되고, router.onError() 를 이용해 등록된 콜백에 전달

  

 

 

 

 

라우터 내부 가드

각 라우트에 설정 할 수 있습니다.

 

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

 

 

 

컴포넌트 내부 가드

<script>
export default {
  beforeRouteEnter (to, from, next) {
    // 이 컴포넌트를 렌더링하는 라우트 앞에 호출됩니다.
    // 이 가드가 호출 될 때 아직 생성되지 않았기 때문에
    // `this` 컴포넌트 인스턴스에 접근 할 수 없습니다!
  },
  beforeRouteLeave (to, from, next) {
    // 이 컴포넌트를 렌더링하는 라우트가 이전으로 네비게이션 될 때 호출됩니다.
    // `this` 컴포넌트 인스턴스에 접근 할 수 있습니다.
  },
  beforeRouteUpdate (to, from, next) {
  	2.2 버전에 추가
  }
}
</script>