[VueJS] FE단 URL 요청시, routes 설정의 순서에 영향을 받는가?

네, Vue.js의 라우터는 routes 배열에서 정의된 순서에 따라 URL을 매칭합니다. 이 매칭 프로세스는 배열의 처음부터 끝까지 진행되며, 첫 번째로 일치하는 라우트가 선택됩니다. 따라서, 라우트 정의의 순서는 중요합니다.

예를 들어, 다음과 같은 라우트 정의가 있다고 가정해봅시다

const routes = [
  { path: '/user/:userId', component: User },
  { path: '/user/new', component: NewUser },
]

위의 정의에서 '/user/new' URL은 첫 번째 라우트와 일치하므로, User 컴포넌트가 렌더링됩니다. 그러나 우리의 의도는 NewUser 컴포넌트를 렌더링하는 것이었습니다.

이 문제를 해결하려면, 더 구체적인 경로를 배열의 앞부분에 배치해야 합니다. 다음과 같이 순서를 변경하면 문제가 해결됩니다

const routes = [
  { path: '/user/new', component: NewUser },
  { path: '/user/:userId', component: User },
]

이제 '/user/new' URL은 NewUser 컴포넌트와 일치하게 됩니다. 따라서 Vue.js에서 라우트의 순서는 중요하며, 더 구체적인 라우트를 더 일반적인 라우트보다 앞에 배치해야 합니다.

by ChatGPT4.0 답변