Vue Router

한국어

English

한국어

English

Appearance

파일 규칙 ​

파일 기반 라우팅은 가능한 한 Nuxt에 가깝게 설계되었습니다.

라우트 폴더 구조 ​

기본적으로 이 플러그인은 src/pages 폴더에서 .vue 파일을 찾아 파일 이름을 기준으로 대응하는 라우팅 구조를 생성합니다. 이제 애플리케이션에 라우트를 추가할 때 더 이상 routes 배열을 직접 유지할 필요가 없습니다. 대신 새 .vue 컴포넌트를 라우트 폴더에 추가하고 나머지는 플러그인에 맡기면 됩니다!

간단한 예를 살펴봅시다:

text
src/pages/
├── index.vue
├── about.vue
└── users/
    ├── index.vue
    └── [id].vue

이렇게 하면 다음과 같은 라우트가 생성됩니다:

  • /: -> index.vue 컴포넌트를 렌더링합니다
  • /about: -> about.vue 컴포넌트를 렌더링합니다
  • /users: -> users/index.vue 컴포넌트를 렌더링합니다
  • /users/:id: -> users/[id].vue 컴포넌트를 렌더링합니다. id는 라우트 param이 됩니다.

인덱스 라우트 ​

어떤 index.vue 파일이든(반드시 소문자여야 함) 빈 경로를 생성합니다(index.html 파일과 유사):

  • src/pages/index.vue: generates a / route
  • src/pages/users/index.vue: generates a /users route

중첩 라우트 ​

중첩 라우트는 같은 이름의 폴더와 함께 .vue 파일을 정의하면 자동으로 만들어집니다. src/pages/users/index.vue와 src/pages/users.vue 컴포넌트를 모두 만들면 src/pages/users/index.vue는 src/pages/users.vue의 <RouterView> 안에서 렌더링됩니다.

즉, 다음과 같은 폴더 구조가 있으면:

text
src/pages/
├── users/
│   └── index.vue
└── users.vue

다음과 같은 routes 배열을 얻게 됩니다:

js
const routes = [
  {
    path: '/users',
    component: () => import('src/pages/users.vue'),
    children: [
      { path: '', component: () => import('src/pages/users/index.vue') },
    ],
  },
]

반대로 src/pages/users.vue 컴포넌트를 생략하면 다음과 같은 라우트가 생성됩니다:

js
const routes = [
  {
    path: '/users',
    // 여기에는 component가 없다는 점에 주목하세요
    children: [
      { path: '', component: () => import('src/pages/users/index.vue') },
    ],
  },
]

폴더와 파일 이름 users/는 my-[id]-param/처럼 유효한 어떤 이름이든 될 수 있습니다.

중첩 레이아웃 없이 중첩 라우트 만들기 ​

때로는 슬래시 형태로 URL에 중첩 구조 를 추가하고 싶지만, 그것이 UI 계층 구조에 영향을 주길 원하지 않을 수 있습니다. 다음 폴더 구조를 생각해 보세요:

text
src/pages/
├── users/
│   ├── [id].vue
│   └── index.vue
└── users.vue

새 라우트 /users/create를 추가하고 싶다면 src/pages/users/create.vue 파일을 만들 수 있지만, 그러면 create.vue 컴포넌트가 users.vue 컴포넌트 안에 중첩됩니다. 이를 피하려면 대신 src/pages/users.create.vue 파일을 만들 수 있습니다. 라우트를 생성할 때 .은 /로 바뀝니다:

js
const routes = [
  {
    path: '/users',
    component: () => import('src/pages/users.vue'),
    children: [
      { path: '', component: () => import('src/pages/users/index.vue') },
      { path: ':id', component: () => import('src/pages/users/[id].vue') },
    ],
  },
  {
    path: '/users/create',
    component: () => import('src/pages/users.create.vue'),
  },
]

이름 있는 라우트 ​

component 속성이 있는 모든 생성된 라우트에는 name 속성도 생깁니다. 이렇게 하면 사용자를 실수로 부모 라우트로 보내는 일을 피할 수 있습니다. 기본적으로 이름은 파일 경로를 사용해 생성되지만, 사용자 정의 getRouteName() 함수를 전달해 이 동작을 덮어쓸 수 있습니다. 거의 모든 곳에서 TypeScript 검증을 받게 되므로 변경도 어렵지 않습니다.

라우트 그룹 ​

때로는 라우트 URL을 바꾸지 않으면서 파일 구조를 정리하는 것이 도움이 됩니다. 라우트 그룹을 사용하면 실제 URL에는 영향을 주지 않으면서, 자신에게 의미 있는 방식으로 라우트를 논리적으로 구성할 수 있습니다. 예를 들어 같은 레이아웃을 공유하는 여러 라우트가 있다면 라우트 그룹으로 함께 묶을 수 있습니다. 다음 파일 구조를 생각해 보세요:

text
src/pages/
├── (admin)/
│   ├── dashboard.vue
│   └── settings.vue
└── (user)/
    ├── profile.vue
    └── order.vue

생성되는 URL:

text
- `/dashboard` -> renders `src/pages/(admin)/dashboard.vue`
- `/settings` -> renders `src/pages/(admin)/settings.vue`
- `/profile` -> renders `src/pages/(user)/profile.vue`
- `/order` -> renders `src/pages/(user)/order.vue`

이 접근 방식은 애플리케이션 라우트 구조를 바꾸지 않으면서 파일을 더 유지보수하기 쉽게 정리할 수 있게 해 줍니다.

페이지 컴포넌트에서도 라우트 그룹을 사용할 수 있습니다. 이는 페이지 컴포넌트 이름을 index.vue로 짓는 것과 같습니다:

text
src/pages/
└─── admin/
    ├── (dashboard).vue // admin 라우트의 index.vue가 됩니다
    └── settings.vue

이름 있는 뷰 ​

파일 이름에 @ + 이름을 붙여 이름 있는 뷰를 정의할 수 있습니다. 예를 들어 src/pages/[email protected]라는 파일은 다음과 같은 라우트를 생성합니다:

js
{
  path: '/',
  component: {
    aux: () => import('src/pages/[email protected]')
  }
}

기본적으로 이름이 없는 라우트의 이름은 default이며, 다른 이름 있는 뷰가 있더라도 파일 이름을 [email protected]로 지을 필요는 없습니다(예: [email protected]와 index.vue가 있는 경우는 [email protected]와 [email protected]가 있는 경우와 같습니다).

동적 라우트 ​

param 이름 을 대괄호로 감싸 라우트 params를 추가할 수 있습니다. 예를 들어 src/pages/users/[id].vue는 /users/:id 경로를 가진 라우트를 만듭니다. 정적 세그먼트 사이 중간에도 param을 추가할 수 있습니다: src/pages/users_[id].vue -> /users_:id. 여러 param을 추가하는 것도 가능합니다: src/pages/product_[skuId]_[seoDescription].vue.

선택적 params는 param 이름 을 대괄호 한 쌍 더 감싸 만들어집니다. 예를 들어 src/pages/users/[[id]].vue는 /users/:id? 경로를 가진 라우트를 만듭니다.

반복 가능한 params는 닫는 대괄호 뒤에 더하기 기호(+)를 붙여 만들 수 있습니다. 예를 들어 src/pages/articles/[slugs]+.vue는 /articles/:slugs+ 경로를 가진 라우트를 만듭니다.

이 둘을 결합해 선택적이면서 반복 가능한 params도 만들 수 있습니다. 예를 들어 src/pages/articles/[[slugs]]+.vue는 /articles/:slugs* 경로를 가진 라우트를 만듭니다.

Catch all / 404 Not found 라우트 ​

catch all 라우트를 만들려면 param 이름 앞에 점 세 개(...)를 붙입니다. 예를 들어 src/pages/[...path].vue는 /:path(.*) 경로를 가진 라우트를 만듭니다. 이 라우트는 어떤 경로와도 매치됩니다. 이는 폴더 안에서도 사용할 수 있습니다. 예를 들어 src/pages/articles/[...path].vue는 /articles/:path(.*) 경로를 가진 라우트를 만듭니다.

여러 라우트 폴더 ​

routesFolder에 배열을 전달하여 여러 라우트 폴더를 지정할 수 있습니다:

js
VueRouter({
  routesFolder: ['src/pages', 'src/admin/routes'],
})

이 폴더 각각에 경로 접두사를 제공할 수도 있습니다. 이는 있는 그대로 사용되며, /로 시작할 수는 없지만, 원하는 어떤 param이든 포함할 수 있고 /로 끝나지 않아도 됩니다:

ts
import VueRouter from 'vue-router/vite'

VueRouter({
  routesFolder: [
    'src/pages',
    {
      src: 'src/admin/routes',
      // 끝에 슬래시는 항상 있고 앞에는 절대 없습니다
      path: 'admin/',
      // src/admin/routes/dashboard.vue -> /admin/dashboard
    },
    {
      src: 'src/docs',
      // 매개변수를 추가할 수 있습니다
      path: 'docs/:lang/',
      // src/docs/introduction.vue -> /docs/:lang/introduction
    },
    {
      src: 'src/promos',
      // 끝 슬래시는 생략할 수 있습니다
      path: 'promos-',
      // src/promos/black-friday.vue -> /promos-black-friday
    },
  ],
})

지정한 폴더들은 서로 분리되어 있어야 하며, 하나의 라우트 폴더 안에 또 다른 지정된 라우트 폴더 가 들어갈 수는 없습니다. 더 세밀한 사용자 정의가 필요하다면 definePage()를 사용해 보세요.

사용자 정의 확장자 ​

대부분은 .vue 파일을 사용하겠지만, 페이지로 간주할 사용자 정의 확장자를 지정할 수도 있습니다. 예를 들어 markdown 파일을 페이지로 사용할 수 있습니다:

ts
import VueRouter from 'vue-router/vite'

VueRouter({
  // 확장자를 전역으로 설정합니다
  extensions: ['.vue', '.md'],
  routesFolder: [
    'src/pages',
    {
      src: 'src/docs',
      // 전역 확장자를 덮어써 markdown 파일만 받도록 합니다
      extensions: ['.md'],
    },
  ],
})

이 경우 index.md라는 이름의 파일은(반드시 소문자여야 함) index.vue 파일처럼 빈 경로를 생성합니다.

모두를 위한 문서 한글화