이름이 있는 경로

모든 경로에는 path와 더불어 name도 제공할 수 있으며, 다음과 같은 장점이 있습니다:

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

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

<router-link> 컴포넌트의 to에 객체를 전달해 이름이 있는 경로에 연결할 수 있습니다.

html

<router-link :to="{ name: 'user', params: { username: 'erina' }}">
  유저 링크!
</router-link>

<router-link :to="{ name: 'user', params: { username: 'erina' }}">
  유저 링크!
</router-link>

프로그래밍 방식의 router.push()에도 같은 방식의 객체를 사용합니다:

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

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

위의 두 경우 모두 /user/erina 경로로 이동합니다.

참고: 예제

각 이름은 모든 경로에서 고유해야 합니다. 하나의 이름을 여러 경로에 추가하면 라우터는 마지막에 추가된 것만 유지합니다. 이에 관해서 더 자세한 정보는 동적 라우팅 섹션에서 확인할 수 있습니다.

이름이 있는 경로 ​