▶ 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 |