타입 지정 라우트 v4.4.0+

라우터가 타입 지정 라우트의 맵 을 갖도록 구성할 수 있습니다. 수동으로도 할 수 있지만, 파일 기반 라우팅 시스템에서 라우트와 타입을 자동 생성하도록 내장 파일 기반 라우팅 플러그인을 사용하는 것이 권장됩니다.

수동 구성

타입 지정 라우트를 수동으로 구성하는 예제는 다음과 같습니다:

// 라우트에 타입을 지정하기 위해 vue-router에서 `RouteRecordInfo` 타입을 import합니다
import type { RouteRecordInfo } from 'vue-router'

// 라우트 인터페이스를 정의합니다
export interface RouteNamedMap {
  // 각 키는 이름입니다
  home: RouteRecordInfo<
    // 여기에는 같은 이름이 들어갑니다
    'home',
    // 이것은 경로이며 자동완성에 표시됩니다
    '/',
    // 이것은 raw params입니다(router.push()와 RouterLink의 "to" prop에 전달할 수 있는 값)
    // 이 경우 허용되는 params는 없습니다
    Record<never, never>,
    // 이것은 정규화된 params입니다(useRoute()로 얻는 값)
    Record<never, never>,
    // 이것은 모든 자식 라우트 이름의 union이며, 이 경우에는 없습니다
    never
  >
  // 각 라우트마다 반복합니다...
  // 원하는 대로 이름을 지을 수 있습니다
  'named-param': RouteRecordInfo<
    'named-param',
    '/:name',
    { name: string | number }, // string 또는 number 허용
    { name: string }, // 하지만 URL에서는 항상 string을 반환
    'named-param-edit'
  >
  'named-param-edit': RouteRecordInfo<
    'named-param-edit',
    '/:name/edit',
    { name: string | number }, // 부모 params도 포함합니다
    { name: string },
    never
  >
  'article-details': RouteRecordInfo<
    'article-details',
    '/articles/:id+',
    { id: Array<number | string> },
    { id: string[] },
    never
  >
  'not-found': RouteRecordInfo<
    'not-found',
    '/:path(.*)',
    { path: string },
    { path: string },
    never
  >
}

// 마지막으로, 이 라우트 맵으로 Vue Router 타입을 보강해야 합니다
declare module 'vue-router' {
  interface TypesConfig {
    RouteNamedMap: RouteNamedMap
  }
}

TIP

이 방식은 실제로 번거롭고 오류가 발생하기 쉽습니다. 그래서 내장 파일 기반 라우팅을 사용해 라우트와 타입을 자동 생성하는 것이 권장됩니다.