Vue Router

API 레퍼런스

<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 링크 클래스를 설명하는 추가 예제를 확인 하십시오.

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

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

2.2.0+

이 메소드는 라우터가 초기 탐색을 완료할 때 호출하는 콜백을 대기시킵니다. 즉, 초기 라우트와 연결된 모든 비동기 입력 훅 및 비동기 컴포넌트를 해결합니다.

이는 서버와 클라이언트 모두 일관된 출력을 보장하기 위해 서버측 렌더링을 사용할 때 유용합니다.

router.onError

2.4.0+

라우트 탐색 중에 에러가 발견되면 호출 될 콜백을 등록하십시오. 호출 할 에러에 유의하십시오. 에러는 다음 시나리오 중 하나이어야합니다.

  • 에러는 라우트 가드 기능 내에서 동기적으로 발생한 경우.
  • 에러는 라우트 가드 함수 내에서 next(err)를 호출하여 캐치한 경우
  • 라우트를 렌더링하는데 필요한 비동기 컴포넌트를 처리하려고 할 때 에러가 발생한 경우.

컴포넌트 주입

주입된 속성

이러한 프로퍼티는 라우터 인스턴스를 루트 인스턴스에 router 옵션으로 전달함으로써 모든 자식 컴포넌트에 주입됩니다.

  • $router

    라우터 인스턴스

  • $route

    현재 활성화 된 Route입니다. 이 속성은 읽기 전용이며 해당 속성은 변경할 수는 없지만 감시 할 수 있습니다.

활성화된 옵션

  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave

컴포넌트 내부 가드를 확인하세요.