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

Question

I have a summary page and a detail subpage. All of the routes are implemented with vue-router (v 0.7.x) using programmatic navigation like this:

this.$router.go({ path: "/link/to/page" })

However, when I route from the summary page to the subpage, I need to open the subpage in a new tab just as one would by adding _target="blank" to an <a> tag.

Is there a way to do this?

Answer 1

Just write this code in your routing file :

{
  name: 'Google',
  path: '/google',
  beforeEnter() {                    
                window.open("http://www.google.com", 
                '_blank');
            }
}

Answer 2

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. thanks.

Answer 3

I think the best way is to simply use:

window.open("yourURL", '_blank');

查看更多

0人赞 添加讨论(0) 举报

Answer 4

Somewhere in your project, typically main.js or router.js

import Router from 'vue-router'

Router.prototype.open = function (routeObject) {
  const {href} = this.resolve(routeObject)
  window.open(href, '_blank')
}

In your component:

<div @click="$router.open({name: 'User', params: {ID: 123}})">Open in new tab</div>

Answer 5

For those who are wondering the answer is no. See related issue on github.

Q: Can vue-router open link in new tab progammaticaly

A: No. use a normal link.

Answer 6

It seems like this is now possible in newer versions (Vue Router 3.0.1):

<router-link :to="{ name: 'fooRoute'}" target="_blank">
  Link Text
</router-link>