[Vue.js] 컴포넌트 가드

프로젝트 진행중 특정 페이지 에서 들어왔을때만 액션을 해야하는 기능을 구현해야했다.

들어오거나 뒤로가기로 페이지 1 로 올때 페이지 2에서 들어왔을시에만 액션을 해야한다.

 

컴포넌트 가드를 사용해보았다.

컴포넌트 내부 가드는 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave 3가지가 있다.

beforeRouteEnter 가드는 네비게이션이 승인된기 전(새로 진입하는 컴포넌트가 생성되기 전)에 호출되기 때문에 

this를 사용할 수 없다고한다. 하지만 next 함수의 콜백은 네비게이션이 승인 된후 호출 되기 때문에 이 콜백을 사용하여 컴포넌트 인스턴스에 접근할 수 있다.

beforeRouteUpdate 가드에서는 this를 사용할 수 있다. 

next의 콜백함수를 지원할 필요가 없어 next의 콜백함수를 지원하지 않는다고 한다.
beforeRouteLeave 가드는 에디터가 값을 저장하지 않고 페이지를 벗어나는 것을 방지하는데

유용한 가드라고 한다. next(false)를 호출하면 네비게이션이 중단된다.

나는 그중 beforeRouteEnter 를 사용했다

this 접근이 안되기때문에 콜백 으로 this를 접근했고

들어온 페이지가 '/application-form-creation' 일때만 vuex 로 플래그를 줘서 액션처리를 했다.

 

주의 : 컴포넌트 가드는 component 레벨 말구 page 레벨에서만 사용가능한듯하다.