# API 레퍼런스

# `<router-link>`

<router-link>는 라우터 지원 앱에서 사용자 네비게이션을 가능하게하는 컴포넌트입니다. 목표 위치는 to prop로 지정됩니다. 기본적으로 올바른 href를 갖는 <a>태그로 렌더링 되지만 tag prop로 구성 될 수 있습니다. 또한 대상 라우트가 활성화되어 있으면 링크가 자동으로 active CSS 클래스를 가져옵니다.

<router-link>는 다음과 같은 이유로 하드 코드 된 <a href="...">보다 선호됩니다.

HTML5 히스토리 모드와 해시 모드에서 모두 동일한 방식으로 작동하므로 모드를 트랜지션하기로 결정하거나 라우터가 IE9에서 해시 모드로 트랜지션 한 경우 변경할 필요가 없습니다.
HTML5 히스토리 모드에서, router-link는 클릭 이벤트를 차단하여 브라우저가 페이지를 다시 로드하지 않도록합니다.
HTML5 히스토리 모드에서 base 옵션을 사용할 때 to prop의 URL에 이를 포함 할 필요가 없습니다.

# Props

# to

자료형: string | Location
필수

링크의 대상 라우트를 나타냅니다. 클릭하면, to prop의 값은 내부적으로 router.push()에 전달 될 것이므로 값은 문자열이나 위치 디스크립터 객체가 될 수 있습니다.

<!-- 리터럴 string -->
<router-link to="home">Home</router-link>
<!-- 이렇게 렌더링 됩니다. -->
<a href="home">Home</a>

<!-- `v-bind`를 이용한 표현식 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- `v-bind`를 생략하면 다른 prop를 바인딩 하는 것과 같습니다. -->
<router-link :to="'home'">Home</router-link>

<!-- 위와 같습니다. -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 이름을 가지는 라우트 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 쿼리가 있으면, `/register?plan=private` 이 됩니다. -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

# replace

자료형: boolean
기본값: false

replace prop를 설정하면 클릭할 때 router.push() 대신 router.replace()를 호출할 것이므로 내비게이션은 히스토리 레코드를 남기지 않을 것입니다.

<router-link :to="{ path: '/abc'}" replace></router-link>

# append

자료형: boolean
기본값: false

append prop를 설정하면 항상 상대 경로가 현재 경로에 추가됩니다. 예를 들어/a에서 상대 링크 b로 이동한다고 가정하면 append없이 /b에서 끝나지만 append로 /a/b에서 끝납니다 .

<router-link :to="{ path: 'relative/path'}" append></router-link>

# tag

자료형: string
기본값: "a"

때때로 우리는 <router-link>를 <li>과 같은 다른 태그로 렌더링되길 바랍니다. 그런 다음 tag prop를 사용하여 렌더링할 태그를 지정할 수 있으며 탐색을 위해 클릭 이벤트를 계속 수신합니다.

<router-link to="/foo" tag="li">foo</router-link>
<!-- 이렇게 렌더링됩니다 -->
<li>foo</li>

# active-class

자료형: string
기본값: "router-link-active"

링크가 활성화 되어 있을 때 적용된 active CSS 클래스를 구성합니다. 기본값은 linkActiveClass 라우터 생성자 옵션을 통해 전역적으로 설정될 수 있습니다.

# exact

자료형: boolean
기본값: false

기본 활성 클래스 매치 동작은 포괄적인 매칭 입니다. 예를 들어, <router-link to="/a">는 현재 경로가 /a 또는 /a/로 시작하는 한 이 클래스를 적용합니다.

이것의 결과는 <router-link to="/">가 모든 라우터에 대해 활성화 될 것입니다! 링크를 "완전 일치 모드"로 강제하려면 exact prop를 사용하십시오.

<!-- 이 링크는 `/` 에서만 active 됩니다 -->
<router-link to="/" exact>

active 링크 클래스를 설명하는 추가 예제 (opens new window)를 확인 하십시오.

# event

2.1.0+

자료형: string | Array<string>
기본값: 'click'

링크 네비게이션을 트리거 할 수있는 이벤트를 지정합니다.

# exact-active-class

2.5.0+

자료형: string
기본값: "router-link-exact-active"

정확하게 일치하는 링크가 활성된 상태일 때 적용되는 CSS 클래스를 지정합니다. 기본값은linkExactActiveClass 라우터 생성자 옵션을 통해 전역으로 설정 될 수 있습니다.

# 외부 엘리먼트에 active 클래스 적용하기

때로 우리는 active 클래스가 <a> 태그 자체가 아닌 외부 엘리먼트에 적용되는 것을 원할 수 있습니다. 이 경우 <router-link> 를 사용하여 외부 엘리먼트를 렌더링하고 원시 <a>는 내부에 작성합니다.

<router-link tag="li" to="/foo">
  <a>/foo</a>
</router-link>

이 경우 <a>는 실제 링크가 될 것이고(올바른 href를 얻습니다.), 활성 클래스는 바깥 쪽 <li>에 적용됩니다.

# `<router-view>`

<router-view> 컴포넌트는 주어진 라우트에 대해 일치하는 컴포넌트를 렌더링하는 함수형 컴포넌트입니다. <router-view>에서 렌더링된 컴포넌트는 자체 <router-view>를 포함 할 수 있으며, 이는 중첩 된 라우트를 위해 컴포넌트를 렌더링합니다.

# `<router-view>` props

# name**

자료형: string
기본값: "default"

<router-view>가 이름을 가지고있을 때, 그것은 일치된 라우트 레코드의 components 옵션에서 해당 이름으로 컴포넌트를 렌더링 할 것입니다. 예제는 이름을 가지는 뷰를 참조하십시오.

# 동작

이름이없는 모든 props는 렌더링된 컴포넌트로 전달되지만 대부분의 경우 라우트 별 데이터는 라우트 매개 변수에 포함됩니다.

이것은 단지 컴포넌트이므로 <transition> 및 <keep-alive>와 함께 작동합니다. 양쪽 모두를 사용할 때는 <keep-alive>를 다음과 같이 사용하십시오.

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

# 라우터 인스턴스

# router.app

자료형: Vue instance

router가 주입 된 루트 Vue 인스턴스.

# router.mode

자료형: string

라우터가 사용하는 mode.

# router.currentRoute

자료형: Route

라우트 객체로 표시된 현재 라우트.

# Methods

# router.beforeEach

# router.beforeResolve

# router.afterEach

전역 네비게이션 가드 추가. 네비게이션 가드를 보십시오.

2.5.0이상에서 세 가지 메소드 모두 등록된 guard / hook을 제거하는 함수를 반환합니다.

# router.push

# router.replace

# router.go

# router.back

# router.forward

프로그래밍 방식으로 새 URL로 이동합니다. 프로그래밍 방식 네비게이션을 참조하십시오.

# router.getMatchedComponents

지정된 위치 또는 현재의 라우트에 일치하는 컴퍼넌트(인스턴스는 아니고 정의/생성자)의 배열을 반환합니다. 이는 주로 데이터를 프리페치(prefetching)하기 위해 서버 측 렌더링 동안 사용됩니다.

# router.resolve

2.1.0+

역방향 URL 해석. <router-link/>에서 사용된 것과 같은 형식의 위치가 주어지면 다음과 같이 처리된 속성을 가진 객체를 반환합니다.

{
  location: Location;
  route: Route;
  href: string;
}

current 현재 라우트를 나타냅니다. (대부분의 경우에 변경할 일이 없습니다.)
append는 current 라우트에 추가할 수 있도록 합니다 (router-link처럼)

# router.addRoutes

2.2.0+

라우터에 동적으로 더 많은 라우트를 추가할 수 있습니다. 전달인자는 routes 생성자 옵션과 동일한 경로 설정 포맷을 사용하는 배열이어야 합니다.

# router.onReady