WEB/Vue.js

[Vue.js][Router] 10. In-component Guard

bay07 2024. 5. 5. 00:54

▶ In-component Guard

특정 컴포넌트 내에서만 동작하는 가드 

=> 작성위치 : 각 컴포넌트 <script> 내부

 

 In-component Guard 종류

현재 라우트에서 다른 라우트로 이동하기 전에 실행

사용자가 현재 페이지를 떠나는 동작에 대한 로직을 처리
이미 렌더링 된 컴포넌트가 같은 라우트 내에서 업데이트 되기 전에 실행

라우트 업데이트 시 추가적인 로직을 처리


사용자가 UserView를 떠날 시 팝업 창 출력하기


UserView 페이지에서 다른 id를 가진 
User의 UserView 페이지로 이동하기

같은 라우트 내에서 업데이트 되는 경우
(/user/1 -> /user/100)


사용자가 UserView를 떠날 시 팝업 창 출력하기


UserView 페이지에서 다른 id를 가진 User의 UserView 페이지로 이동하기
  Q. 만약 onBeforRouteUpdate를 사용하지 않았다면?

oneBeforeRouteUpdate에서 userId를 변경하지 않으면
userId는 갱신되지 않음

=> 컴포넌트가 재사용 되었기 때문 



   

 

'WEB > Vue.js' 카테고리의 다른 글

[Vue.js][State Management] 0. 목차  (0) 2024.05.05
[Vue.js][Router] 11. Lazy Loading Routes  (0) 2024.05.05
[Vue.js][Router] 9. Per-route Guard  (0) 2024.05.04
[Vue.js][Router] 8. Globally Guard  (0) 2024.05.04
[Vue.js][Router] 7. Navigation Guard  (0) 2024.05.04