there is 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?
Solution :
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.
Solution 2:
It seems like this is now possible in newer versions (vue.js Router 3.0.1):
<router-link :to=”{ name: ‘fooRoute’}” target=”_blank”>
Link Text
</router-link>
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 the route like the one asked in the question (path: ‘/link/to/page’):
import vue.js 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 the summary page and open the 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 the 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
Solution 5:
I think the best way is to simply use:
window.open(“yourURL”, ‘_blank’);
* flies away *