Vue.js v-btn';至';道具将路径添加到基本url(localhost),我如何指向其他网站?

Vue.js v-btn';至';道具将路径添加到基本url(localhost),我如何指向其他网站?,vue.js,font-awesome,vuetify.js,Vue.js,Font Awesome,Vuetify.js,我正在使用带有Nuxt和Vuetify.js的Vue.js项目设置 我正在尝试添加图标作为v-btns,以引导用户进入Instagram页面 不幸的是,单击图标时,浏览器会指向http://localhost:3000/https://www.instagram.com/therock/?hl=en而不仅仅是https://www.instagram.com/therock/?hl=en如预期。Instagram帐户URL固定在基本URL的末尾 以下是Vue文件的模板部分: <templa

我正在使用带有Nuxt和Vuetify.js的Vue.js项目设置

我正在尝试添加图标作为
v-btn
s,以引导用户进入Instagram页面

不幸的是,单击图标时,浏览器会指向
http://localhost:3000/https://www.instagram.com/therock/?hl=en
而不仅仅是
https://www.instagram.com/therock/?hl=en
如预期。Instagram帐户URL固定在基本URL的末尾

以下是Vue文件的
模板部分:

<template>
  <v-app>
    <v-toolbar app flat color="rgb(249, 249, 249)">
      <router-link to="/" class="toolbar-title">
        <v-toolbar-title>Chumiest Bucket</v-toolbar-title>
      </router-link>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn
          v-for="(item, index) in items"
          :key="index"
          :to="item.path"
          flat
        >{{ item.name }}</v-btn>
        <v-btn flat :to="instagram.path">
          <font-awesome-icon :icon="instagram.icon"/>
        </v-btn>
      </v-toolbar-items>

      <v-menu class="hidden-md-and-up">
        <v-toolbar-side-icon slot="activator"></v-toolbar-side-icon>
        <v-list>
          <v-list-item v-for="(item, index) in items" :key="index">
            <v-btn :to="item.path" flat>{{ item.name }}</v-btn>
          </v-list-item>
          <v-btn flat :to="instagram.path">
            <font-awesome-icon :icon="instagram.icon"/>
          </v-btn>
        </v-list>
      </v-menu>

    </v-toolbar>

    <v-content style="padding-top: 19px;">
      <v-container>
        <nuxt />
      </v-container>
    </v-content>

    <v-footer app style="position: absolute;">
      <span style="font-size: 8pt;">&copy; 2019 Chumiest Bucket</span>
    </v-footer>
  </v-app>
</template>
<script>
export default {
  name: 'app',
  data() {
    return {
      fixed: false,
      items: [
        {
          name: 'About',
          path: '/about'
        },
        {
          name: 'Stuff',
          path: '/stuff'
        }
      ],
      instagram: {
        icon: ['fab', 'instagram'],
        path: 'https://www.instagram.com/therock/?hl=en'
      },
    }
  }
}
</script>
“to”道具用于导航到路由中的页面。见文件。要导航到外部链接


<a :href="instagram.path">
  {{ url }}
</a>