Can Vue-Router Open a Link in a New Tab

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

I think that you can do something like this:

let routeData = this.$router.resolve({name: 'routeName', query: {data: "someData"}});
window.open(routeData.href, '_blank');

It worked for me.

Vuetify : How to configure VueRouter to open link on a new tab?

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.

A v-list-item that links to an external URL would use the href prop like this:

<v-list-item href="https://google.com">Google</v-list-item>

And one that opens a new tab would use the target="_blank" prop:

<v-list-item target="_blank" href="https://google.com">Google</v-list-item>

Internal links use the to prop instead of href:

<v-list-item to="/dashboard">Dashboard</v-list-item>

And they could be opened in a new tab with target="_blank" as well:

<v-list-item target="_blank" to="/dashboard">Dashboard</v-list-item>

Solution

In your case, you have an array of items that need to bind the previously mentioned props conditionally. That's best done using v-bind with an object (where the object's key-value pairs are bound as component props) that is computed based on each item's properties:

  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 => {
const isExternalLink = url => /^((https?:)?\/\/)/.test(url)
const linkProps = {
[isExternalLink(link.route) ? 'href' : 'to']: link.route,
}
if (link.newTab) {
linkProps.target = '_blank'
}
return {
...link,
linkProps,
}
})
},
},
}

  1. 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">
br>

demo

Nuxt: How to open page in a new tab

The whole point of vue-router is navigating inside a single page application so it doesn't have a way to navigate to a blank new tab as far as I know. Fortunately there is an old fashioned thing called 'html' which has something called an anchor tag that you can use like this:

<a href="/user" target="_blank">User</a>


Related Topics



Leave a reply



Submit