[Vue] vue-class-component에서 추가 hook 사용하기

이전 글에서도 몇 번 언급했지만 Vue에서 class 형태로 컴포넌트를 정의하기 위해, vue-class-component를 주료 이용한다(공식 사이트에서도 언급한다).

일반적인 Vue.extend로 사용하는 것과 기능은 같지만 Watch, Prop 등의 사용법이 약간 달라서 헤매는데, 컴포넌트 내부 네비게이션 가드를 사용할 때도 사용법이 조금 다르다. 네비게이션 가드를 통해서 라우터 전후의 이벤트를 정의해줄 수 있다.

추가적으로 컴포넌트 내부에서 사용하는 훅은 다음과 같다.

• beforeRouteEnter
• beforeRouteUpdate (2.2 버전에 추가)
• beforeRouteLeave

메소드명이 명확해서, 사용하기엔 무리가 없으나 vue-class-component를 사용할 경우에는 미리 정의가 필요하다.

main.js(혹은 main.ts)에서 다른 컴포넌트들이 정의되기 전(router/index.ts의 import 등)에 정의가 필요하다. 다음은 별도 파일로 만드는 예시이다.

import Component from 'vue-class-component'

Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate'
])

import './class-component-hooks'

import Vue from 'vue'
import App from './App'

// ...

이처럼 다른 컴포넌트들이 import 되기 전에 import해주는 것이 중요하다. 이후에는 mounted와 같은 다른 훅을 사용할 때와 동일하게 컴포넌트 내부에서 사용할 수 있다.

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class HelloWorld extends Vue {
  beforeRouteEnter(to, from, next) {
    console.log('beforeRouteEnter')
    next()
  }

  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate')
    next()
  }

  beforeRouteLeave(to, from, next) {
    console.log('beforeRouteLeave')
    next()
  }
}