Vue Router의 Named Routes를 통해 하위 라우팅과 상위 라우팅의 구분하기
1. Purpose
vue를 이용하여 프로젝트를 진행하는 경우 라우팅을 자주 사용하게 된다. 라우팅을 이용하다보면 하위 경로에 대한 라우팅을 하게 되는 경우가 있다. 예를 들면 BASE-URL/user 라는 주소와, BASE-URL/user/123 과 같은 주소를 하나의 프로젝트에서 쓴다는 것이다. 이때, router-link 태그를 이용하여 경로 이동을 할 때 path를 통해 이동하는 경우에는 Vue Router에서 선언 순서에 따라서 제대로 라우팅 경로가 매칭이 되지 않는 경우가 생긴다. 즉, BASE-URL/user 에 매칭해야 할 컴포넌트가 BASE-URL/user에 해당하는 컴포넌트인지, BASE-URL/user/123에 해당하는 컴포넌트인지 확실히 구분하기 어려워 진다는 의미이다. 이런 혼동을 방지하기 위해서 Vue Router에서는 Named Routes라는 개념을 사용한다.
2. Usage
Named routes를 사용하기 위해서는 우선 router 선언을 할 때 속성으로 name 을 설정해주어야 한다.
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})위의 경우에서 User 컴포넌트로 이동하기 위해서는 크게 두가지 방법이 있다.
1. path를 이용하기
<router-link :to="{path:`user/${userId}`}">User</router-link>2. name을 이용하기
<router-link :to="{ name: 'user', params: {userId: 123}}">User</router-link>만약 /user 페이지가 다른 화면을 나타내야 하는 경우, 2번과 같이 name을 이용하여 라우팅 이동을 진행하는 것이 권장된다.
추가로 router.push() 함수를 이용하여 이동을 할 수도 있다.
router.push({ name: 'user', params: { userId: 123 }})❗️ 나중에 찾아보니 Named Route는 주로 한 화면 안에 여러 개의 컴포넌트를 표시하기 위해 사용하고, 위와 같이 하위 라우팅을 관리하기 위해서는 Nested Route를 사용한다고 한다. 내가 사용할 때에는 제대로 작동하지 않았는데, 나중에 기회가 되면 다시 시도해봐야 겠다.
3. Reference
