by Sai gowtham

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

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.

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.

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>

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2021 (Beginner + Advanced)
JavaScript - The Complete Guide 2021 (Beginner + Advanced)
64,026 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
152,857 students enrolled
48.5 hours of video content
View Course