라우트 매칭 문법
대부분의 앱은 동적 라우트 매칭에서 본 것처럼, /about
같은 정적 라우트와 /users/:userId
같은 동적 라우트를 사용하지만, Vue Router는 훨씬 더 많은 것을 제공합니다!
TIP
이 문서에서는, 각 라우트 객체의 path
속성 값을 집중 탐구하기 위해 의도적으로 component
속성은 생략했습니다.
파라미터에 커스텀 정규식 사용하기
:userId
라는 파라미터를 정의하면, 내부적으로 "/
가 아닌 하나 이상의 문자"라는 의미를 가진 ([^/]+)
정규식을 사용하여, URL에서 파라미터를 추출합니다. 두 개의 라우트가 파라미터를 기반으로 구분되어야 하는 경우가 아니라면 잘 작동합니다. 만약 /:orderId
과 /:productName
두 개의 라우트가 있고, 두 라우트 모두 동일한 파라미터를 가지고 있다고 가정해 봅시다. 이럴 경우 이 두 라우트를 구분할 필요가 있으므로, 라우트에 정적 섹션을 추가하면 됩니다:
const routes = [
// 매치: /order/3549
{ path: '/order/:orderId' },
// 매치: /product/books
{ path: '/product/:productName' },
]
그러나 때에 따라서는 정적 섹션 /order
또는 /product
를 추가하고 싶지 않을 수 있습니다. :orderId
은 숫자만 가능하지만, :productName
은 무엇이든 가능하다면, 파라미터에 괄호를 사용해 커스텀 정규식을 지정할 수 있습니다:
const routes = [
// /:orderId -> 숫자만 매치됨
{ path: '/:orderId(\\d+)' },
// /:productName -> 무엇이든 매치됨
{ path: '/:productName' },
]
이제 /25
로 이동하면 /:orderId
와 일치하고, 다른 항목으로 이동하면 /:productName
과 일치합니다. routes
배열의 순서는 중요하지 않습니다!
TIP
JavaScript 문자열에서 \
문자를 실제로 \d
처럼 전달하려면, \
를 이스케이프처리해 \\d
와 같이 전달해야 합니다.
반복가능한 파라미터
/first/second/third
처럼 여러 섹션이 있는 라우트를 매칭해야 하는 경우, 파라미터에 *
(의미: 0개 이상) 또는 +
(의미: 1개 이상)를 사용하여, 파라미터가 반복 가능함을 정의해야 합니다:
const routes = [
// /:chapters -> 매치됨 /, /one, /one/two, /one/two/three, 등
{ path: '/:chapters*' },
// /:chapters -> 매치됨 /one, /one/two, /one/two/three, 등
{ path: '/:chapters+' },
]
이렇게 하면 파라미터에 문자열 대신 배열이 제공되며, 명명된 라우트를 사용할 때 배열을 전달해야 합니다:
// 다음의 경우 { path: '/:chapters*', name: 'chapters' },
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// 탐색된 라우트 /
router.resolve({ name: 'chapters', params: { chapters: ['a', 'b'] } }).href
// 탐색된 라우트 /a/b
// 다음의 경우 { path: '/:chapters+', name: 'chapters' },
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// `+`를 사용했으나 `chapters`가 비어있으므로 애러가 발생함.
닫는 괄호 뒤에 추가하여 커스텀 정규식과 결합할 수도 있습니다:
const routes = [
// 숫자만 매치함
// 매치됨 /1, /1/2, etc
{ path: '/:chapters(\\d+)+' },
// 매치됨 /, /1, /1/2, etc
{ path: '/:chapters(\\d+)*' },
]
민감하고 엄격한 라우트 옵션
기본적으로 모든 라우트는 대소문자를 구분하지 않으며, 후행 슬래시가 있거나 없는 라우트와 일치합니다. 예를 들어 /users
라우트는 /users
, /users/
, 심지어 /Users/
와 일치합니다. 이 동작은 strict
및 sensitive
옵션으로 구성할 수 있으며, 라우터 또는 라우트 단계에서 설정할 수 있습니다:
const router = createRouter({
history: createWebHistory(),
strict: true, // 모든 라우트에 적용
routes: [
// /users/posva 는 매치가능, 하지만 다음은 아님:
// - /users/posva/ 이유는 strict: true
// - /Users/posva 이유는 sensitive: true
{ path: '/users/:id', sensitive: true },
// /users, /Users, /users/42 는 매치가능, 하지만 /users/ 또는 /users/42/ 는 아님
{ path: '/users/:id?' },
],
})
선택적 파라미터
?
(0개 또는 1개) 수식어를 사용하여 파라미터를 선택사항으로 정의할 수도 있습니다:
const routes = [
// 매치 가능: /users, /users/posva
{ path: '/users/:userId?' },
// 매치 가능: /users, /users/42
{ path: '/users/:userId(\\d+)?' },
]
*
는 기술적으로 파라미터를 선택사항으로 정의합니다. 하지만 ?
는 반복 불가능 파라미터로 배열 대신 문자열을 제공집니다.
디버깅
라우트가 매칭되지 않는 원인을 찾아야 하는 경우가 있습니다. 라우트가 정규식으로 변환되는 방법 분석 또는 버그 보고를 위해 라우트 우선순위 확인 도구를 사용할 수 있습니다.