[Vue-Router] route match regular expression

라우트 경로를 정규표현식을 사용하여 표현할수 있습니다.

const routes = [
  {
    name: 'login',
    path: '/regex/:id(\\d),
    // 대부분의 정규표현식의 사용이 가능합니다.
    path: '/regex/:id()\\d+)
    component: import('@views/login-view.vue')
  }
]

 

위와 같이 선언할 경우 /regex/123 같은 url 경로에도 login-view 페이지가 보여집니다.

 

그리고 아래와 같이 선언할 경우 /regex/id 이후에 붙는 모든 /id(/number) 가 동일하게 매칭됩니다.

const routes = [
  {
    name: 'login',
    path: '/regex/:id(\\d+)+,
    component: import('@views/login-view.vue')
  }
]

/regex/1/2/3/4 도 /regex/123/2344 도 모두 login-view.vue  로 매칭됩니다.

 

이런 정규표현식의 방식은 뷰 라우터의 경로 관련 정의에 모두 사용가능합니다.

{
    name: 'home',
    path: '/',
    component: Home,
    alias: '/home/:id+'
  },

위와 같이 alias 에도 사용할수 있습니다.

위 코드의 경우 /home/1/23 등의 url 과 매칭됩니다.

 

마찬가지로 /regex/:id(\\d+)? 등등 정규표현식이 사용가능한 여러 방식이 있으니 사용해보세요