router-link 하이퍼링크 밑줄 제거하기

router-link를 사용할 때 하이퍼링크에 밑줄이 생긴다.

주요 코드는 아래와 같다.

<template>
  <v-app id="app">
    <v-app-bar app color="primary" dark>

    <v-spacer></v-spacer>
    <router-link :to="{ name: 'intro'}"> <v-btn color="info" class="button">INTRO</v-btn> </router-link>
    <router-link :to="{ name: 'card'}"> <v-btn color="info"class="button" >SHAPE</v-btn>  </router-link>
    <router-link :to="{ name: 'painter'}"><v-btn color="info" class="button">PAINTER</v-btn> </router-link>
    <router-link :to="{ name: 'demo'}"><v-btn color="info" class="button" >DEMO</v-btn> </router-link>

  </v-app-bar>
</template>

 

밑줄 속성은 CSS의 아래 속성을 사용하면 제거할 수 있다.

.logo{
  style="text-decoration: none;
}

 

밑줄 속성 제거된 코드

<template>
  <v-app id="app">
    <v-app-bar app color="primary" dark>

    <v-spacer></v-spacer>
    <router-link style=text-decoration:none; :to="{ name: 'intro'}"> <v-btn color="info" class="button">INTRO</v-btn> </router-link>
    <router-link style=text-decoration:none; :to="{ name: 'card'}"> <v-btn color="info" class="button" >SHAPE</v-btn>  </router-link>
    <router-link style=text-decoration:none; :to="{ name: 'painter'}"><v-btn color="info" class="button">PAINTER</v-btn> </router-link>
    <router-link style=text-decoration:none; :to="{ name: 'demo'}"><v-btn color="info" class="button" >DEMO</v-btn> </router-link>

  </v-app-bar>
</template>