네임드 라우트

라우트를 생성할 때, 선택적으로 라우트에 name을 부여할 수 있습니다:

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

그런 다음 <router-link>에 to 프로퍼티를 전달할 때 path 대신 name을 사용할 수 있습니다:

<router-link :to="{ name: 'profile', params: { username: 'erina' } }">
  User profile
</router-link>

위 예제는 /user/erina로 가는 링크를 생성합니다.

• Playground에서 보기.

name을 사용하는 것은 다양한 장점이 있습니다:

• 하드코딩된 URL이 없습니다.
• params의 자동 인코딩.
• URL 오타 방지.
• 경로 순위를 우회하여 동일한 경로로 매칭되는 낮은 순위의 라우트를 표시할 수 있습니다.

이름은 모든 라우트에서 고유해야 합니다. 동일한 이름을 여러 라우트에 추가하면 마지막 라우터의 것만 유지합니다. 이에 대한 자세한 내용은 동적 라우팅 섹션에서 확인할 수 있습니다.

Vue Router에는 router.push()와 router.replace() 메서드처럼 (이동할) 위치(정보 객체)를 전달할 수 있는 다양한 파트가 있습니다.이러한 메서드에 대해서는 프로그래매틱 탐색 가이드에서 자세히 다룰 것입니다. to 프로퍼티와 마찬가지로, 이 메서드들도 name을 사용하여 (이동할) 위치(정보 객체) 전달을 지원합니다:

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