vue router-link 사용법 정리(Navigation menu)

vue 에서는 vue router 로 라우팅을 하며

a tag 를 대체하는 router-link 가 존재한다.

 

router-link 의 장점을 알아보자.

 

출처 : router.vuejs.org/kr/api/#router-link

 

 

router-link 는 prop 을 활용해서 쓰면된다.

to 를 이용해서 url 을 전달하면 해당 url 로 이동할 수 있다.

<router-link to="/link-to-page">
</router-link>

 

기본적으로 router-link 를 사용하면 a tag 로 치환되며

tag prop 을 이용하면 다른 tag 로 변경해서 사용할수도 있다.

 

<router-link to="/link-to-page" tag="div">
</router-link>

 

a tag 의 특성상 밑줄이 생기는데 router-link 에서 밑줄제거는 css 를 이용하면 해결할 수 있다.

.logo{
text-decoration: none;
}

 

 

두 가지 prop 만 알아도 기본기능은 활용할 수 있으며

다른 prop 및 자세한 사항은 아래 링크에서 확인할 수 있다.

router.vuejs.org/kr/api/#props

API 레퍼런스 | Vue Router