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?
This question is related to
javascript
vue.js
vue-router
The simplest way of doing this using an anchor tag would be this:
<a :href="$router.resolve({name: 'posts.show', params: {post: post.id}}).href" target="_blank">
Open Post in new tab
</a>
If you are interested ONLY on relative paths like: /dashboard
, /about
etc, See other answers.
If you want to open an absolute path like: https://www.google.com
to a new tab, you have to know that Vue Router is NOT meant to handle those.
However, they seems to consider that as a feature-request. #1280. But until they do that,
Here is a little trick you can do to handle external links with vue-router.
router.js
) and add this code:/* Vue Router is not meant to handle absolute urls. */
/* So whenever we want to deal with those, we can use this.$router.absUrl(url) */
Router.prototype.absUrl = function(url, newTab = true) {
const link = document.createElement('a')
link.href = url
link.target = newTab ? '_blank' : ''
if (newTab) link.rel = 'noopener noreferrer' // IMPORTANT to add this
link.click()
}
Now, whenever we deal with absolute URLs we have a solution. For example to open google to a new tab
this.$router.absUrl('https://www.google.com)
Remember that whenever we open another page to a new tab we MUST use noopener noreferrer
.
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>
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:
I think the best way is to simply use:
window.open("yourURL", '_blank');
* flies away *
This worked for me-
let routeData = this.$router.resolve(
{
path: '/resources/c-m-communities',
query: {'dataParameter': 'parameterValue'}
});
window.open(routeData.href, '_blank');
I modified @Rafael_Andrs_Cspedes_Basterio answer
This works for me:
In HTML template:
<a target="_blank" :href="url" @click.stop>your_name</a>
In mounted():
this.url = `${window.location.origin}/your_page_name`;
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.
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>
Just write this code in your routing file :
{
name: 'Google',
path: '/google',
beforeEnter() {
window.open("http://www.google.com",
'_blank');
}
}
Source: Stackoverflow.com