Sometimes, we want to open a link in a new tab with Vue Router.
In this article, we’ll look at how to open a link in a new tab with Vue Router.
How to open a link in a new tab with Vue Router?
To open a link in a new tab with Vue Router, we can use the this.$router.resolve method to get the full object with the URL of a given route.
Then we call window.open with the route object’s href property URL and '_blank' to open the URL in the new tab.
For instance, in our component method or hook, we write
const routeData = this.$router.resolve({
name: "routeName",
query: { data: "someData" },
});
window.open(routeData.href, "_blank");
to call this.$router.resolve with an object that has the route name and query query parameters object.
resolve returns an object with the href property that has the full URL of the route.
Then we call window.open with routeData.href and '_blank' to open the routeData.href URL in a new tab.
Conclusion
To open a link in a new tab with Vue Router, we can use the this.$router.resolve method to get the full object with the URL of a given route.
Then we call window.open with the route object’s href property URL and '_blank' to open the URL in the new tab.
