我有一個看起來像這樣的導航欄組件。
我需要在新選項卡中打開 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 >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' : '']">
它看起來沒有那么干凈，多余的/還在那里.. :(
uj5u.com熱心網友回復：
我不知道您使用的是哪個版本的 vuetify，但在 v-list-item 的檔案中，您有 2 個有用的道具：
- href -> 在此處使用您的 link.route 變數
- 目標-> 您應該嘗試使用值“_blank”（該值意味著在新選項卡中打開鏈接，在 html 中 - 請參見此處）
關于您嘗試過的內容，請將其更改為：
<v-list-item v-for="link in links" :key="link.text" :href="link.route" :target="link.newTab ? '_blank' : ''">
uj5u.com熱心網友回復：
為了更好地清理模板，我通常在這些情況下創建一個方法。那么你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)
}
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/385872.html
標籤：javascript Vue.js Vuejs2 Vue 组件 Vuetify.js