I have a navbar with a menu that users can click on. Some links will need to open up a new tab. This is what I have and I couldn't get it to work.

<template>
    <nav>
        <v-app-bar text app color="blue">
            <v-app-bar-nav-icon  @click="drawer = !drawer"></v-app-bar-nav-icon>
            <v-app-bar-title >
                <span >Logo</span>
                <span>Global</span>
            </v-app-bar-title>
        </v-app-bar>

        <v-navigation-drawer v-model="drawer" app >
            <v-list>
                <img  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

Did I do sth wrong ?

Open up a new tab seems to work, but it kept prepending my localhost URL.

CodePudding user response：

Values such as '/dashboard' is not valid for Window.open, you need the full path.

Try:

if (!link.newTab) {
  this.$router.push({ path: link.route })
} else {
  let routeData = this.$router.resolve({path: link.route});
  window.open(routeData.href, '_blank');
}

This way the vue router handles the path building and takes the environment into account.

Source: Can vue-router open a link in a new tab?

CodePudding user response：

Don't use a click-handler with the v-list-item, since that defeats the underlying anchor tag generated for the routing, and has accessibility implications. Stick with the v-list-item's props that are built in for routing:

• href: To create an external link with <v-list-item>, use the href prop. Internal links should use to instead.

• target: To open a new window upon clicking the link, use the target="_blank" prop.

To dynamically bind to or href based on each link, use v-bind with an object:

1. Compute a new array of links (named computedLinks) that has a new prop to bind (named linkProps):

export default {
  computed: {
    computedLinks() {
      return this.links.map(link => {
        // use `href` for external links; and `to` for internal links
        const linkProps = {
          [/^((https?:)?\/\/)/.test(link.route) ? 'href' : 'to']: link.route,
        }
        if (link.newTab) {
          linkProps.target = '_blank'
        }
        return {
          ...link,
          linkProps,
        }
      })
    },
  },
}

2. Update the template to use computedLinks, and bind each link's linkProps to its corresponding v-list-item:

<v-list-item v-for="link in computedLinks" :key="link.text" v-bind="link.linkProps">