Can vue-router open a link in a new tab?

Navigating to a new tab programmatically

In case you need to open a new tab programmatically based on some logical conditions, you would need to surpass the hurdles of href. While Vue Router doesn’t directly provide this function, we can use a combination of this.$router.resolve and window.open to get it done.

If you are working with the Composition API, using the useRouter hook gets you access to the router instance, similar to how this.$router works for Options API. Here’s what that looks like:

methods: {
  openInNewTab(routeName, routeParams, routeQuery) {
    // Ain't no mountain high enough for Vue Router and window.open combo 😎
    const routeData = this.$router.resolve({ 
      name: routeName, 
      params: routeParams, 
      query: routeQuery 
    });
    window.open(routeData.href, '_blank');
  }
}


And here's the Composition API conversion:

import { useRouter } from 'vue-router';

setup() {
  const router = useRouter();
  const openInNewTab = (routeName, routeParams, routeQuery) => {
    // Combo level: Over 9000 🚀
    const routeData = router.resolve({ 
      name: routeName, 
      params: routeParams, 
      query: routeQuery 
    });
    window.open(routeData.href, '_blank');
  };
  return { openInNewTab };
}


Use this method by calling it with the route name and parameters to open the desired route in a new tab.

Extending the Vue Router prototype

If you want to go an extra mile, you can extend Vue Router's prototype to create an open method. Here's how you can do that:

Router.prototype.open = function(routeDetails) {
  // Always extend, never surrender! 💪
  const routeData = this.resolve(routeDetails);
  window.open(routeData.href, '_blank');
};


This can be invoked in the components using @click="$router.open({ name: 'routeName' })".

Kindly note, these methods are workarounds as Vue Router does not natively support opening new tabs programmatically. Keep an eye out for discussions on the GitHub issues page for any updates or good practices.

Using <router-link> for new tabs without JS

Since Vue Router 3.0.1, you can conveniently use <router-link> coupled with target="_blank" attribute for new tab opening that aligns with Vue Router's navigations. Here's how to implement this:

<router-link :to="{ name: 'routeName' }" target="_blank">
  Open in New Tab
</router-link>


This mode of navigation sticks to Vue's declarative nature and preserves HTML semantics, allowing for a more accessible solution minus additional JavaScript.

Roadblocks and considerations

Be aware of popup blockers that are a part of modern browsers. If users have blocked popups for your domain, the new tab may not open.

Another scenario to consider is client-side navigation. In case you're opening a Vue app route in a new tab, it's crucial to ensure the state in that app is independently set or properly initialized to avoid weird behavior.