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


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

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 tag.
Is there a way to do this?


Solution 1:

I think that you can do something like this:

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

it worked for me.

Solution 2:

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

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

Solution 3:

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.

Solution 4:

In case that you define your route like the one asked in the question (path: ‘/link/to/page’):

import Vue from 'vue'
import Router from 'vue-router'
import MyComponent from '@/components/MyComponent.vue';


export default new Router({
  routes: [
      path: '/link/to/page',
      component: MyComponent

You can resolve the URL in your summary page and open your sub page as below:

export default {
  methods: {
    popup() {
      let route = this.$router.resolve({path: '/link/to/page'});
      // let route = this.$router.resolve('/link/to/page'); // This also works., '_blank');

Of course if you’ve given your route a name, you can resolve the URL by name:

routes: [
    path: '/link/to/page',
    component: MyComponent,
    name: 'subPage'


let route = this.$router.resolve({name: 'subPage'});


Solution 5:

I think the best way is to simply use:"yourURL", '_blank');

?* flies away *

Solution 6:

Somewhere in your project, typically main.js

import Router from 'vue-router' = function (routeObject) {
  const {href} = this.resolve(routeObject), '_blank')

In your component:

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