이름이 있는 라우트

라우트를 생성할 때, 우리는 선택적으로 라우트에 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' } }">
  사용자 프로필
</router-link>

위의 예제는 /user/erina로의 링크를 생성할 것입니다.

플레이그라운드에서 확인하기.

name을 사용하는 것은 여러 가지 이점이 있습니다:

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

각 이름은 모든 라우트에서 유일해야 합니다. 같은 이름을 여러 라우트에 추가하면 라우터는 마지막 것만 유지할 것입니다. 이에 대해 더 자세히 알아보려면 동적 라우팅 섹션을 참고하세요.

Vue Router의 다른 부분에서도 위치를 전달할 수 있습니다. 예를 들어 router.push()와 router.replace() 메소드입니다. 이 메소드에 대해서는 프로그래밍 방식 네비게이션 가이드에서 더 자세히 다룰 것입니다. to prop처럼, 이 메소드들도 name을 사용하여 위치를 전달할 수 있습니다:

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

이름이 있는 라우트 ​

이름이 있는 라우트