Tengo una barra de navegación con un menú en el que los usuarios pueden hacer clic. Algunos enlaces necesitarán abrir una nueva pestaña. Esto es lo que tengo y no pude hacerlo funcionar.
<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('go run ...') 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¿Hice algo mal?
Abrir una nueva pestaña parece funcionar, pero seguía anteponiendo mi URL localhost.
No utilice un controlador de click con el v-list-item , ya que anula la etiqueta de anclaje subyacente generada para el enrutamiento y tiene implicaciones de accesibilidad. Siga con los accesorios v-list-item que están integrados para el enrutamiento:
href : para crear un enlace externo con <v-list-item> , use la propiedad href . Los enlaces internos deberían usar to en su lugar.
target : para abrir una nueva ventana al hacer clic en el enlace, use la propiedad target="_blank" .
Un v-list-item que se vincula a una URL externa usaría la propiedad href de esta manera:
<v-list-item href="https://google.com">Google</v-list-item> Y uno que abre una nueva pestaña usaría el accesorio target="_blank" :
<v-list-item target="_blank" href="https://google.com">Google</v-list-item> Los enlaces internos usan to prop en lugar de href :
<v-list-item to="/dashboard">Dashboard</v-list-item> Y también podrían abrirse en una nueva pestaña con target="_blank" :
<v-list-item target="_blank" to="/dashboard">Dashboard</v-list-item> En su caso, tiene una variedad de elementos que deben vincular condicionalmente los accesorios mencionados anteriormente. Eso se hace mejor usando v-bind con un objeto (donde los pares clave-valor del objeto están vinculados como accesorios de componentes) que se calcula en función de las propiedades de cada elemento:
computedLinks ) que tiene un nuevo accesorio para enlazar (llamado linkProps ): export default { computed: { computedLinks() { return this.links.map(link => { const isExternalLink = url => /^((https?:)?\/\/)/.test(url) const linkProps = { [isExternalLink(link.route) ? 'href' : 'to']: link.route, } if (link.newTab) { linkProps.target = '_blank' } return { ...link, linkProps, } }) }, }, }computedLinks y vincule los linkProps de cada enlace a su v-list-item : <v-list-item v-for="link in computedLinks" :key="link.text" v-bind="link.linkProps"> 👆 👆