vue의 라우터 링크 속성에 대한 자세한 설명

vue의 router-link 속성은 다음과 같은 속성 값을 가집니다. to는 점프 콘텐츠를 추가하기 위한 herf 태그와 동일하고, replacement는 페이지 전환 시 기록 기록을 남기지 않는 데 사용되며, tag는 라우터 링크를 해당 태그에 렌더링합니다.

vue에서는 vue.js와 vue-router를 결합하여 간단한 단일 페이지 애플리케이션을 구현할 수 있습니다. 여기서 <router-link>는 주로 다양한 HTML 콘텐츠를 구현하기 위한 탐색 링크를 설정하는 데 사용됩니다. 스위치. 다음으로 이 속성을 기사에서 자세히 소개할 예정인데, 이는 일정한 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

[추천 강좌: Vue Tutorial]

router-link tag

vue1.0 버전에서는 여전히 a 태그를 사용하여 링크 점프 기능을 구현하고 있습니다. 하지만 링크 주소는 HTML의 주소와 다릅니다. v-link 속성에 의해 제어됩니다. 그러나 버전 2.0에서는 a 태그가 rount-link 속성으로 대체되었지만 페이지에 표시될 때 여전히 a 태그로 렌더링됩니다. 다음으로 이 속성의 각 값의 사용법을 자세히 소개하겠습니다

router-link 속성 값에 대한 자세한 설명

(1) ":to" 속성 값

이 속성 값은 "herf"에 해당합니다. a 태그 속성, 다음 내용은 점프 링크의 내용입니다.

<router-link :to="http://www.php.cn/">PHP中文网</router-link>

는

<a href="http://www.php.cn/">PHP中文网</a>

와 동일합니다. (2) "replace" 속성 값

routre-link에 교체 속성 값을 추가하는 주요 목적 태그는 페이지 전환 시 변경되지 않는다는 점입니다. 기록 기록을 남겨주세요

<router-link :to="http://www.php.cn/" replace></router-link>

(3) "태그" 속성 값

태그 속성이 있는 라우터 링크가 해당 태그로 렌더링됩니다

<router-link :to="/http://www.php.cn/" tag="li">PHP中文网</router-link>

에 해당합니다.

<li>PHP中文网</li>

이 시점에서 페이지의 li도 태그 역할을 합니다. Vue가 자동으로 클릭 이벤트를 바인딩하고 페이지로 이동하기 때문입니다

(4) "active-class" 속성 값

이 속성은 링크 활성화 시 클래스 속성을 설정하는 데 사용됩니다. 즉, 현재 페이지 및 현재 페이지 주소와 일치하는 모든 링크에 클래스 속성이 추가됩니다.

<router-link :to="http://www.php.cn/" active-class="u-link--Active">PHP中文网</router-link>

active-class의 기본값입니다. 속성은 router-link-active이므로 설정하지 않으면 이 클래스로 렌더링됩니다

(5) "append" 속성 값

append 속성을 설정한 후 현재( 상대) 경로. 예를 들어 /a에서 상대 경로 b로 이동합니다. 추가가 구성되지 않은 경우 경로는 /b입니다. 추가가 구성된 경우 경로는 /a/b입니다.

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

a 대신 라우터 링크를 사용하면 얻을 수 있는 이점 tag

router- 링크 속성은 페이지의 모든 요소로 렌더링될 수 있습니다. 예를 들어 위 코드에서 li 태그로 렌더링하면 점프 효과를 얻을 수 있습니다. 또한 a 태그를 클릭하면 페이지가 다시 로드될 수 있지만, router-link를 사용한 후에는 이 태그를 vue에서 모니터링하므로 링크가 점프할 때 페이지가 새로 고쳐지지 않습니다.

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들께 도움이 되었으면 좋겠습니다.

위 내용은 vue의 라우터 링크 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!