【问题标题】：Vuetify : Navbar open specific links in new tabsVuetify：导航栏在新选项卡中打开特定链接
【发布时间】：2022-01-19 23:24:36
【问题描述】：

我有一个看起来像这样的导航栏组件。

我需要在新标签中打开 2 个菜单选项。

<template>
    <nav>
        <v-app-bar text app color="blue">
            <v-app-bar-nav-icon class="white--text" @click="drawer = !drawer"></v-app-bar-nav-icon>
            <v-app-bar-title class="text-uppercase white--text">
                <!-- <span class="font-weight-light">Vi3</span>
                <span>Global</span> -->
            </v-app-bar-title>
        </v-app-bar>

        <v-navigation-drawer v-model="drawer" app class="grey lighten-1">
            <v-list>
                <v-list-item v-for="link in links" :key="link.text" router :to="link.route">
                    <v-list-item-action>
                        <v-icon>{{ link.icon }}</v-icon>
                    </v-list-item-action>

                    <v-list-item-content>
                        <v-list-item-title> {{ link.text }} </v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>
    </nav>
</template>
<script>
export default {
    data() {
        return {
            drawer: true,
            links: [
                { icon: 'dashboard', text: 'Dashboard', route: '/dashboard', newTab: false },
                { icon: 'leaderboard', text: 'Stats', route: 'https://www.google.com ', newTab: true },
                { icon: 'qr_code_scanner', text: 'QR Codes', route: '/qr-codes', newTab: false },
                { icon: 'tungsten', text: 'Campaigns', route: '/Campaigns', newTab: false },
                { icon: 'link', text: 'URL Groups', route: '/url-groups', newTab: false },
                { icon: 'settings', text: 'Settings', route: '/settings', newTab: false },
                { icon: 'support', text: 'Support', route: 'https://youtube.com', newTab: true },
                { icon: 'exit_to_app', text: 'Logout', route: '/' }
            ]
        }
    },
    methods: {
        created() {
            if (this.link.text == 'Support') {
                console.log('Support')
            }
        }
    }
}
</script>

如何添加逻辑并捕捉它？

我尝试将 URL 放入其中，它一直在它前面添加 / 导致这个

有什么提示吗？

我试过了

<v-list-item v-for="link in links" :key="link.text" router :to="link.route" target="link.text == 'Support' ? '_blank' : '']">

看起来没那么干净，多余的 / 还在那里.. :(

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

我不知道您使用的是哪个版本的 vuetify，但在 v-list-item 的文档中，您有 2 个有用的道具：

href -> 在此处使用您的 link.route 变量
target -> 你应该尝试使用值“_blank”（这个值意味着在新标签中打开链接，在 html 中 - 见 here）

关于您尝试过的内容，将其更改为：

<v-list-item v-for="link in links" :key="link.text" :href="link.route" :target="link.newTab ? '_blank' : ''">

【讨论】：

我使用2.4.0，它是目前唯一兼容Vue2的版本。
这个解决方案，不知何故仍将 / 添加到 URL 的开头。
您的回答无效。

【解决方案2】：

为了更好地清理模板，我通常在这些情况下创建一个方法。那么你的v-list-item 可能是：

<v-list-item v-for="link in links" :key="link.text" @click="go(link)">

并使用此方法运行：

go(link){
    if(!link.newTab){ 
         this.$router.push({ path: link.route })
    }
    else{
         window.open(link.route)
    }
},

【讨论】：

我喜欢这个干净的解决方案，但它一直把我送到这个http://localhost:8080/https:/www.google.com ....
它添加了http://localhost:8080/——这是我不想要的。
我认为这与您的vue路由器的配置问题有关。如果您愿意，我们可以在另一个问题中处理它。
我应要求提出了一个新问题。 stackoverflow.com/questions/70413536/…
您的回答无效。