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 <a> tag.

Is there a way to do this?

回答1:

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.

回答2:

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.

回答3:

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> 

回答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';  Vue.use(Router)  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:

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

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'}); 

References:

• vue-router router.resolve(location, current?, append?)
• vue-router router-link

文章来源: Can vue-router open a link in a new tab?