Vue-router의 URL 표기법 path-to-regexp

Vue router에서 사용하는 URL 표기법은 https://github.com/pillarjs/path-to-regexp 를 이용하고 있습니다.

감각적으로 알수도 있습니다만, 제공하는 표기법을 간단히 정리 해 보았습니다.

Named Parameters

:으로 시작하는 파라메터명을 기술 할 수 있습니다

패턴

결과

:foo/:bar

/test/route

['/test/route', 'test', 'route']

Optional

인자가 옵션이여서 있을수도 없을수도 있다면 ?를 이용해 표기할수 있습니다.

패턴

결과

/:foo/:bar?

/test

['/test', 'test', undefined]

/:foo/:bar?

/test/route

['/test', 'test', 'route']

zero or more

인자가 0개 또는 복수개를 가질수 있들때 파라메터명 뒤에 *붙여 표기할수 있다.

패턴

결과

/:foo*

/

['/', undefined]

/bar/baz

['/bar/baz', 'bar/baz']

one or more

인자가 1개 또는 복수개를 가질수 있들때 파라메터명 뒤에 +붙여 표기할수 있다.

패턴

결과

/:foo+

/

null

/bar/baz

['/bar/baz', 'bar/baz']

Custom 정규표현식 이용하기

각 파라메터의 기본 정규표현식은 [^\/]+ 입니다. 하지만 직접 정규표현식을 입력할수 있습니다.

패턴

결과

/icon-:foo(\\d+).png

/icon-123.png

['/icon-123.png', '123']

/icon-abc.png

null

이름없는 파라메터

파라메터가 이름을 가지지 않을수도 있습니다. 이때는 인덱스 번호로 접근할수 있습니다.

패턴

결과

/:foo/(.*)'

/test/route

['/test', 'test', 'route']

Tags: vue  vue-router  path-to-regexp  url