네비게이션 가드

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

Parms 또는 쿼리를 변경하면 네비게이션 가드가 실행이 안됨

전역가드

router.beforeEach

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

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

• 네비게이션이 트리거 될 때마다 가드가 작성 순서에 따라 호출되기 전의 모든 경우에 발생함
• 가드는 비동기식으로 실행 될 수 있음
• 네비게이션은 모든 훅이 해결되기 전까지 보류 중으로 간주

전달인자

• to : Route = 대상 Route 객체로 이동
• from : Route = 현재 라우트로 오기전 라우트
• next: Function = 이 함수는 훅을 해결하기 위해 호출 되어야함, 액션은 next에 제공된 전달인자에 달려 있음
  • next() : 파이프라인의 다음 훅으로 이동 훅이 없는 경우 네비게이션은 승인
  • next(false) : 현재 네비게이션을 중단
  • next('/') or next({path:'/'}) : 다른 위치로 리디렉션, 현재 네비게이션 중단 -> 새 네비게이션 시작
  • next(error) : 전달된 인자가 error이면 탐색이 중단되고 router.onError()를 이용해 등록된 콜백에 에러가 전달됨

Global After Hooks

전역 훅을 등록 할 수도 있지만, next 함수를 얻지 못하며 네비게이션에 영향을 줄 수 없음

router.after((to,from) => {
 ...
 })

참고자료

https://v3.router.vuejs.org/kr/guide/advanced/navigation-guards.html