Vuetify：导航栏在新选项卡中打开特定链接

Posted 2023-02-16

【中文标题】Vuetify：导航栏在新选项卡中打开特定链接

【英文标题】：Vuetify : Navbar open specific links in new tabs

【发布时间】：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' : '']">

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

【参考方案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路由器的配置问题有关。如果您愿意，我们可以在另一个问题中处理它。

我应要求提出了一个新问题。 ***.com/questions/70413536/…

您的回答无效。