[typescript] 타입스크립트를 사용한 Vue.js 라우트 구현

26 Dec 2023

typescript

Vue.js는 강력한 프런트엔드 프레임워크 중 하나로, 타입스크립트를 사용하여 보다 안정적이고 확장 가능한 애플리케이션을 개발할 수 있습니다. Vue.js에서 타입스크립트를 이용한 라우트 구현하는 방법을 살펴보겠습니다.

Vue 라우터 설치

Vue 라우터를 사용하기 위해 프로젝트에 라우터를 설치합니다.

npm install vue-router

타입스크립트 지원

타입스크립트를 Vue에 적용하기 위해서는 vue-property-decorator 패키지를 설치해야 합니다.

npm install vue-property-decorator

라우트 구현

라우트를 정의하고 구현하기 위해 다음과 같이 타입스크립트를 사용할 수 있습니다.

import Vue from 'vue';
import Router from 'vue-router';
import { Component } from 'vue-property-decorator';

// 페이지 컴포넌트 정의
@Component
class HomeComponent extends Vue {
  // 컴포넌트 내용 작성
}

@Component
class AboutComponent extends Vue {
  // 컴포넌트 내용 작성
}

// 라우터 생성
Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: HomeComponent,
    },
    {
      path: '/about',
      name: 'About',
      component: AboutComponent,
    },
  ],
});

위 코드에서는 vue-router를 사용하여 홈과 어바웃 페이지를 정의하고, vue-property-decorator 패키지를 사용하여 타입스크립트로 컴포넌트를 정의한 후, 라우터에 등록하는 방법을 보여줍니다.

이제 Vue.js 앱을 만들 때 타입스크립트로 라우트를 구현하는 방법에 대해 이해했습니다.

더 자세한 내용은 Vue Router 및 Vue Property Decorator를 참고하세요.