I've set up a navbar with a menu that users can interact with by clicking on the links. Some of these links should open in a new tab, but I'm having trouble getting it to work properly.
<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">Logo</span>
<span>Global</span>
</v-app-bar-title>
</v-app-bar>
<v-navigation-drawer v-model="drawer" app class="grey lighten-1">
<v-list>
<img class="ml-5 mb-3" src="../assets/Logo-Blue.png" width="70" />
<v-list-item v-for="link in links" :key="link.text" router :to="link.route" @click="go(link)">
<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: 'home', text: 'Dashboard', route: '/dashboard', newTab: false },
{ icon: 'leaderboard', text: 'Stats', route: 'www.google.com ', newTab: true },
]
}
},
methods: {
go(link) {
console.log('Handling link click...')
console.log(link)
console.log(process.env.APP_URL)
if (!link.newTab) {
this.$router.push({ path: link.route })
} else {
window.open(link.route)
}
}
}
}
</script>
src/router/index.js
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
Could you please review my code? It seems like opening a new tab works, but it's adding my localhost URL prefix.