[VueJS] Vuetify v-btn 에 외부 링크 넣기

VuetifyJS에서 제공하는 버튼이라던가 아이콘 등 대부분의 컴포넌트들에 :to="경로" 이런 식으로 작성하면 프로젝트 내에 해당되는 경로로 이동된다.

v-bottom-navigation을 만들어보다가 버튼으로 다른 사이트 링크를 띄우고 싶었는데

vuetify 이것저것 쓰다 보면서 to="url" 이것만 계속 쓰고, html 태그도 아닌 것에 익숙해지다 보니

herf라는 속성이라는 게 생각이 안 났어서 구글링을 함...

 

외부 사이트를 띄우고 싶을 땐 :href를 사용

<template>
  <v-bottom-navigation
    v-model="bottomNav"
    dark
  >
  
    <v-btn :href="`https://github.com/smw0807`" target="_blank">
      <span>GitHub</span>
      <v-icon>mdi-github</v-icon>
    </v-btn>

    <v-btn :href="`https://minu0807.tistory.com/`" target="_blank">
      <span>Tstory</span>
      <v-icon>mdi-alpha-t-circle</v-icon>
    </v-btn>

    <v-btn :href="`https://www.instagram.com/s_minu92/`" target="_blank">
      <span>Instagram</span>
      <v-icon>mdi-instagram</v-icon>
    </v-btn>

  </v-bottom-navigation>
</template>