이름 있는 라우트

라우트를 만들 때 선택적으로 해당 라우트에 name을 부여할 수 있습니다:

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

그 다음 <router-link>에 to prop을 전달할 때 path 대신 name을 사용할 수 있습니다:

template

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

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

See it in the Playground.

name을 사용하면 여러 장점이 있습니다:

하드코딩된 URL이 필요 없습니다.
params가 자동으로 인코딩됩니다.
URL 오타를 피할 수 있습니다.
path ranking을 우회할 수 있습니다. 예를 들어 같은 경로에 매치되는 더 낮은 우선순위의 라우트를 표시할 수 있습니다.

각 이름은 모든 라우트에서 반드시 고유해야 합니다. 여러 라우트에 같은 이름을 추가하면 라우터는 마지막 것만 유지합니다. 자세한 내용은 동적 라우팅 섹션에서 읽을 수 있습니다.

Vue Router에는 location을 전달할 수 있는 다른 부분도 많이 있습니다. 예를 들어 router.push()와 router.replace() 메서드가 있습니다. 이러한 메서드에 대해서는 프로그래밍 방식 내비게이션 가이드에서 더 자세히 다룹니다. to prop과 마찬가지로 이 메서드들도 name으로 location을 전달하는 것을 지원합니다:

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

이름 있는 라우트 ​

이름 있는 라우트