VueRouter의 Named Route 파헤치기

Naming Route

우리는 route를 설정할 때 선택적으로 name을 지정할 수 있습니다.

const routes = [
    {
        path: '/user/:username',
        name: 'profile',
        component: User,
    }
]

위에처럼 name을 지정해주면 <router-link>를 사용시에 to속성에 path정보를 넣지 않고 name을 명시해서 사용할 수 있습니다.

<router-link :to="{ name: 'profile', params: { username: 'erina' } }"> 사용자 프로필 </router-link>

name을 이용한 routing은 여러가지 이점이 있습니다.

• 하드코딩된 URL이 없음
• params의 자동 인코딩
• URL 오타 방지
• 경로 순위를 우회하여, 같은 경로와 일치하는 하위 순위 라우트를 표시

name은 중복될 수 없습니다.
같은 name을 사용하는 route가 존재하면 에러를 발생시키죠.
Vue Router의 다른 부분에서도 위치를 전달 할 수 있는데, 예를 들어 router.push(), router.replace()메소드 입니다.

router.push({name: 'profile', params: { username: 'erina'} })