vue.js - v-btn 'to'属性将路径添加到基本URL(本地主机)，如何定向到另一个网站？

Question

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

我正在尝试将FontAwesome图标添加为v-btn，以将用户引导至Instagram页面。

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

这是Vue文件的template部分:

<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>

这是Vue文件的 script部分:

<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>

Answer 1

“至” Prop 用于导航到路线内的页面。请参阅文档here。要导航到外部链接，Bind the url to href instead。

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