Vue-router에 대해 알아보자! (2)

1. 프로그래밍 방식 네비게이션

가 아니더라도 라우터의 인스턴스 메소드를 사용하여 프로그래밍적으로 라우팅을 할 수 있다. vue router의 프로그래밍 방식 내비게이션은 window.history API와 상응하다.

router의 push 메소드 (===window.history.pushState)

router.push(location, onComplete?, onAbort?)와 같이 사용할 수 있다.
onComplete는 네비게이션이 완료되었을 때 호출되는 콜백 함수이고, onAbort는 네비게이션이 취소되었을 때의 콜백 함수이다.(해당되지 않으면 생략 가능)

// 리터럴 string
router.push('home')

// object로 전달
router.push({ path: 'home' })

// 이름을 가지는 라우트
router.push({ name: 'user', params: { userId: 123 }})

// 쿼리와 함께 사용
router.push({ path: 'register', query: { pageNo: 1, pageSize: 5 }})

router의 replace 메소드 (===window.history.replaceState)

router.replace는 router.push와 같은 역할을 하지만 새로운 히스토리 항목에 추가하지 않고 탐색한다는 점이 다르다. 즉, 현재 항목을 대체한다.
 

router의 go 메소드 (===window.history.go)

router.go(n)으로 사용하며 n은 정수 타입을 의미한다. 히스토리 스택에서 앞으로, 또는 뒤로 이동하는 단계를 의미하며 1이 앞으로 가는 것(history.forward())이고, -1이 뒤로 가는 것(history.back())이다.

2. 네비게이션 가드

다른 경로로 리디렉션하거나 네비게이션을 취소하여 네비게이션을 보호하는 데에 사용된다.

Params나 query의 변경으로는 네비게이션 가드가 호출되지 않기 때문에 $route 객체를 watch를 통해 관찰하거나 beforeRouteUpdate를 사용해야 한다.

전역 가드

• 라우팅이 일어나기 전에 실행되는 beforeEach 메소드

    const router = new VueRouter({ ... })

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

to: route(파라미터: 라우트 객체) -> 대상 route 객체로 이동
from: route(라우트 객체) -> 현재 route로 오기 전의 route
next: 함수 -> 다음 이벤트 훅으로 이동시키며 이 함수를 호출하지 않으면 이동하지 않는다.
next(false) -> 현재 네비게이션을 중단하며 from 라우트 객체의 URL로 재설정
next(경로) -> 지정된 경로로 리디렉션함
next(error) -> 내비게이션이 중단되고 route.onError()를 통해 등록된 콜백에 에러가 전달된다.
 

컴포넌트 내부 가드

beforeRouteEnter: 렌더링하는 라우트 이전에 호출되는 훅. 이 훅이 호출되는 시점에는 Vue 인스턴스가 만들어지지 않았기 때문에 this/vm 사용 불가능하다.
beforeRouteLeave: 현재 경로에서 다른 경로로 빠져나갈 때 호출되는 훅. 일반적으로, 사용자가 저장하지 않은 편집 내용을 두고 실수로 라우트를 떠나는 것을 방지하는 데에 사용한다.
beforeRouteUpdate: 이미 렌더링 된 컴포넌트의 경로가 변경될 때 호출되는 훅.(라우트 정보가 변경될 때만 호출됨)
 

라우트 별 가드

beforeEnter 가드를 라우트 설정 객체에 직접 정의할 수 있다.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

전체 네비게이션 시나리오 및 Vue-router life cycle

reference

• Vue.js 퀵 스타트
• Vue Router의 LifeCycle 이해하기 (https://adeuran.tistory.com/14)
• Vue Route Component Hooks (https://itnext.io/vue-custom-route-hooks-3f50cc30bb87)