[Udemy Vue 완벽가이드 Section13] 186. 'afterEach' 전역 가드

# afterEach

router에 추가할 수 있는 전역 가드가 하나 더 있다.

→ 바로 afterEach 가드

afterEach에는 함수가 필요하다. 함수는 어떤 식으로 정의해도 괜찮다. 화살표함수로 정의해도 된다.

router.afterEach(function() {})

 

afterEach는 to와 from을 인수로 취하지만, 한번 실행하면 이동이 승인되기 때문에 next함수는 필요하지 않다.

그래서 afterEach는 이동을 거부하도록 변경할 수 없다.

거부는 before 훅(가드)으로만 가능하다.

 

 

대신 afterEach가드는 서버에 분석 데이터를 보내는 데에 유용하다.

이동 액션(action)이나 사용자의 페이지 변경을 로그로 남기는 등을 afterEach로 수행할 수 있다.

//main.js
router.afterEach(function(to, from) {
 // sending analytics data
 console.log('Global afterEach');
 console.log(to, from);
})

 

이동이 승인된 뒤라 사용자가 화면에서 볼 내용 등은 제어할 수 없고

console.log로 to와 from을 출력하거나 서버로 데이터를 보내는 정도가 끝이다.

 

파일을 저장하고 애플리케이션을 로드하면 콘솔에서 모든 이동액션 끝에 'Global afterEach'가 있는게 보인다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.