Vue.js - Vue Router의 라이프사이클

 

---

내비게이션 가드

 

내비게이션 가드는 라우터에서 다른 라우터로 이동하는 내비게이팅이 수행될 때 실행되어 라우터의 이동을 막거나 혹은 다른 라우터로 리다이렉팅 할 수 있는 기능입니다.

내비게이션 가드는 적용 범위에 따라 전역 가드, 라우트별 가드, 컴포넌트별 가드로 나뉘어집니다.

그리고 다시 가드의 호출 타이밍에 따라 before 훅과 after 훅으로 나뉘게 됩니다.,

 

before 훅은 라우터의 이동이 끝나기 전에 미리 호출되는 훅이며,

after 가드는 라우터의 이동이 끝난 후 호출되는 훅입니다.

 

---

beforeRouteLeave

 

컴포넌트 내에 선언하며,

기존에 존재하던 컴포넌트가 제거되기 전에 이 훅을 호출합니다.

이 훅은 주로 문서(게시글 등)를 저장하지 않은 상태로 다른 곳으로 이동하는 것을 방지하는 데 사용됩니다.

beforeRouteLeave 훅 내에서는 this 컨텍스트를 통해 컴포넌트에 접근할 수 있습니다.

 

const Foo = {
    template: `...`,
    beforeRouteLeave (to, from, next) {
        const answer = window.confirm('저장되지 않은 작업이 있습니다! 정말 나갈까요?');
        if (answer) {
            next();
        } else {
            next(false);
        }
    }
}

 

before 함수는 세 가지의 인자를 전달받습니다.

- to : 다음에 이동할 라우트 정보

- from : 이전 라우트 정보

- next : 이 함수가 명시적으로 호출되어야 다음 라우트로 이동을 시작합니다.

 

이 중 가장 중요한 것은 next 함수입니다. 모든 before 훅은 명시적으로 next 함수가 호출되지 않으면 다음 라우터로 이동하지 않습니다.

반드시 next() 함수를 호출해줘야 합니다.

 

---

beforeEach

 

기존의 컴포넌트가 제거된 후 새로운 내비게이션이 시작될 때 이 훅을 호출합니다.

즉, 이동할 라우트의 컴포넌트들을 불러오기 전에 실행되는 훅입니다.

어떤 페이지에 이동하는지에 관계없이 실행되며 공식문서에서는 이를 전역가드(Gloabl Guards)라고 부르고 있습니다.

 

전역가드는 이름 그대로 라우터에서 특정 라우터나 컴포넌트가 아니라,

애플리케이션 내부에서 내비게이팅이 수행될 때마다 호출되는 전역적인 가드입니다.

주로 애플리케이션 내에서 공통적으로 수행해야 하는 동작을 정의할 때 사용합니다.

 

예를들면 현재 라우트로 이동할 권한이 있는지 여부를 확인하는 용도로도 사용할 수 있습니다.

 

const router = new VueRouter({ ... });
    router.beforeEach((to, from, next) => {
    // ...
})
 
// beforeEach 가드를 사용하여 라우트의 권한을 정의하는 코드
router.beforeEach((to, from, next) => {
    const isLoginUser = isLogin()
    if (isLogin) {
        next()
    } else {
    // 이전라우트로 돌려보냄 
    next(false)
     
    // 또는 로그인 페이지
    next({ path: '/login'})
    }
}

 

---

beforeRouteUpdate

 

컴포넌트를 재사용 할 경우에만 발생하는 훅입니다.

 

재사용이란, 예를 들어 게시판의 첫 번째 페이지 "/board/page/1"에서 다음 글 목록을 불러오기 위해

"/board/page/2"로 게시판의 페이지를 이동했습니다. 이 경우 게시판 컴포넌트는 유지가 되고 내용 등 일부만 변하게 됩니다.

이때 다시 사용되는 컴포넌트를 재사용이라고 부릅니다.

 

이렇게 재사용 되는 컴포넌트가 있을 경우에 발생하는 훅입니다.

 

const Foo = {
    template: `...`,
    beforeRouteUpdate (to, from, next) {
    // ...
    }
}

 

 

 

---

beforeEnter

 

이동하려는 라우트에 진입하기 전 호출되는 훅입니다.

라우트의 설정 객체에 직접 정의할 수 있으며,

 

beforeEach와의 차이점은 beforeEnter은 라우트마다 각각 다르게 가드를 지정할 수 있습니다.

즉, 라우트별 가드가 가능하며 특정 라우트에서만 수행하는 가드입니다.

라우트별 가드는 특정 페이지에만 영향을 끼쳐야하는 리다이렉트와 같은 동작에 주로 사용됩니다.

 

routes: [
    {
        path: '/foo',
        component: Foo,
        beforeEnter: (to, from, next) => {
        // ...
        // 인증 값 검증 로직 추가
        }
    }
]

 

---

beforeRouteEnter

 

새로운 컴포넌트를 만들기 전 호출되는 훅입니다.

 

라우팅이 끝나지 않았기 때문에 아직 컴포넌트를 만들기 전 이므로 컴포넌트를 this로 접근할 수 없으며,

객체(instance)에 접근하고자 할 경우에는

beforeRouterEnter의 인자로 주어지는 next 함수에 콜백을 이용하여 접근할 수 있습니다.

 

**DOM 업데이트 이후

next 함수에 콜백을 걸어뒀다면, 그 작업은 돔이 업데이트되고 난 시점에서 실행됩니다.

 

const Foo = {
    template: `...`,
    beforeRouteEnter (to, from, next) {
        // ...
    }
}

 

---

beforeResolve

 

내비게이션 작업을 완료하기 전에 호출되는 훅입니다.

beforeEach와 비슷하게 어떤 페이지에 이동하는지에 관계없이 실행되는 전역 가드입니다.

 

beforeEach와 차이점은 모든 in-component 가드와 비동기 라우터 컴포넌트가 종료 된 후,

내비게이션이 승인되기 바로 전에 호출된다는 것입니다.

 

const router = new VueRouter({ ... })
    router.beforeResolve((to, from, next) => {
    // ...
})

 

---

afterEach

 

내비게이션 작업이 완료된 후 호출되는 훅입니다.

다른 훅들과 달리 내비게이션 작업이 완료된 후 이므로, 내비게이션 작업에 영향을 미칠 수 없습니다.

 

즉, beforeEach 가드와 다르게 라우터의 이동이 완료된 후 호출되는 훅입니다.

따라서 라우트 이동을 제한하는 기능을 구현할 수 없습니다.

 

afterEach 훅의 콜백 함수는 두 가지의 인자를 받는데,

이미 라우팅이 완료된 후 호출되는 훅이기 때문에 next 함수가 없기 때문에 두 가지의 인자를 받습니다.

 

router.afterEach((to, from) => {
    // ...
})

 

---