v-btn 'to' prop 添加到 base url (localhost) 的路径，我怎样才能定向到另一个网站？

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

"to" 道具用于导航到您的路线中的页面。请参阅文档 here. To navigate to external links, Bind the url to href instead。

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

v-btn 'to' prop 添加到 base url (localhost) 的路径，我怎样才能定向到另一个网站？

v-btn 'to' prop adds path to base url (localhost), how can I direct to another website?

font-awesome

vue.js

vuetify.js