Sometimes, we want to open a Vue Router link in a new tab.

In this article, we’ll look at how to open a Vue Router link in a new tab.

How to open a Vue Router link in a new tab?

to open a Vue Router link in a new tab, we can call the $router.resolve method to get the full URL from the route name, path, parameter and query values.

Then we can use window.open to open the URL in a new tab.

For instance, we write

<script>
export default {
  //...
  methods: {
    open() {
      const routeData = this.$router.resolve({
        name: "routeName",
        query: { data: "someData" },
      });
      window.open(routeData.href, "_blank");
    },
  },
  //...
};
</script>

to call this.$router.resolve with the with an object with the route name and the query parameters to return an object that has the href property with the URL resolved from the values.

Then we call window.open with routeData.href and '_blank' to open the URL in a new window.

Conclusion

to open a Vue Router link in a new tab, we can call the $router.resolve method to get the full URL from the route name, path, parameter and query values.

Then we can use window.open to open the URL in a new tab.