set target= '_blank' in router-link of vuejs 2.5

Question

Using vuejs 2.5 if there is a way in router-link to set

target= '_blank'

? I tried this way:

<router-link :to="{name: 'UserProfileView', params: {id: participantUser.user_id}, target: '_blank' }"  >  

but failed...

Thanks!

Jebel

Possible duplicate of Can vue-router open a link in new tab? – Grecize

Answer 1

You will add target='_blank' like on <a> tag

Hope is clear

Concinnate

so it will be something like: <router-link :to="{name: 'UserProfileView', params: {id: participantUser.user_id}}" target= '_blank' > – Concinnate

it won't work if tag is not a (for example tag="button") – Cortege

@Cortege i think because by default router-link is an anchor tag with the target property, the button html element don't have it – Concinnate

@Concinnate you mean in the router-link tag ? – Affrica

@SalmaELHAJRAOUI, like the example on the first comment <router-link target= '_blank' >my link </router-link> – Concinnate

Answer 2

You must to use method. Method looks something like this:

methods: {
     redirectToUserView(user) {
      const route = this.$router.resolve({
        name: 'UserProfileView',
        params: {id: participantUser.user_id},   
      });
      window.open(route.href, '_blank');
    },
 }

Birl

Answer 3

Below code is to open a new tab with parameter.

With router link=

<router-link
                  :to="{ name: 'task_section',query: {reportId: item.task,}}"
                  target="_blank"> Link Text
              </router-link>

Now access to the sented data

this.$route.query.reportId

Idea

Answer 4

Perfectly worked for my code "target='_blank'" with external redirect.

<b-dropdown-item
                :key="props.row.banner_id"
                :to="{name:'banners-preview',
                      params: { id: props.row.banner_id } }"
                target='_blank'
              >
                <feather-icon
                  icon="ExternalLinkIcon"
                  class="mr-50"
                />
                <span>Preview Link</span>
</b-dropdown-item>

Kiesha

Answer 5

try 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>

Tithe