Vue.js, How to open a link in a new tab

we are going to learn about how to open a link in a new tab in Vue.js app.

Normally, we create a link in Vue app using the <route-link> component with the to attribute.

<router-link to="/contact">Contact</router-link>

If we click on the above link, it will open a Contact page in the same tab.

Opening the link in a new tab

To open the link in a new tab, we need to add the target attribute with a value _blank to the <router-link> component.

Here is an example:

<router-link to="/contact" target="_blank">Contact</router-link>

In programmatic navigation, we can open the link in a new tab like this:

<template>  <div id="app">    <button @click="gotoContact()">Contact</button>  </div></template><script>export default {  name: "app",  methods: {    gotoContact() {      let route = this.$router.resolve({ path: "/contact" });      window.open(route.href);    },  },};</script>

In the example above, we first accessed the full URL of a /contact page by using the this.$router.resolver() method then passed it to the window.open() method.

Opening the external links in a new tab

To open the external link in a new tab, we can use the HTML anchor element <a> by passing target=”_blank” attribute.

<a href="https://www.google.com" target="_blank">   Google</a>

If you are using target=_blank for external links, your page performance may suffer to avoid that you can use rel=”noreferrer noopener”.

<a href="https://www.google.com" target="_blank" rel="noreferrer noopener">   Google</a>

In programmatic navigation, we can use the window.open() method to open the external links in a new tab.

Here is an example:

<template>  <div id="app">    <button @click="gotoGoogle()">Google</button>  </div></template><script>export default {  name: "app",  methods: {    gotoGoogle() {      window.open("https://www.google.com");    },  },};</script>