![Vue.js, How to open a link in a new tab Vue.js, How to open a link in a new tab](https://techtoguide.com/wp-content/uploads/2023/12/TypeScript-How-to-Declare-an-array-of-Objects-768x356.png)
[ad_1]
In this tutorial, 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:
App.vue
<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:
App.vue
<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>
[ad_2]