Vue.js v-btn';至';道具将路径添加到基本url(localhost),我如何指向其他网站?
我正在使用带有Nuxt和Vuetify.js的Vue.js项目设置 我正在尝试添加图标作为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
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;">© 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>