Vue(14) router-link (라우터 링크) 밑줄 없애기

Vue.js 로 개발 중이다. 라우터의 <router-link> 태그를 사용하였더니 아래와 같이 밑줄이 생겼다.

이런 경우 어떻게 해야할까? 당황하지말고 새발자를 잘 따라와보자.

---

Vue(13) router-link (라우터 링크) 밑줄 없애기

우리가 잊지 말아야 할 것이 있다.

vue 는 프레임워크라는 것, 즉 vue 의 현란한 태그들을 사용하지만 정작 HTML 에서는 익숙한 태그들로 바뀐다.

 

 

router-link 를 html 로 보면 <a> 태그로 사용된다.

// vue.js
<div class="logo_title">
  <router-link to="/home">HOME</router-link>
</div>

// 웹에서 볼 때
<div class="logo_title">
  <a href="/home">HOME</a>
</div>

 

 

실제 HTML에서는 <router-link> 라는 태그를 <a> 태그로 인식하기 때문에 a 에 대한 css 를 지정해주면 해결!

a {
  text-decoration: none;
}