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!

Possible duplicate of [Can vue-router open a link in new tab?](https://stackoverflow.com/questions/40015037/can-vue-router-open-a-link-in-new-tab) — samayo, Jan 15 '18 at 15:41

score 32 · Answer 1 · answered Jan 15 '18 at 16:34

32

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

Hope is clear

answered Jan 15 '18 at 16:34

kalidou.diagne

432
3
8

7

so it will be something like: `` – kalidou.diagne Jan 15 '18 at 16:35
it won't work if tag is not a (for example tag="button") – igor Jan 04 '19 at 03:01
@igor i think because by default router-link is an anchor tag with the target property, the button html element don't have it – kalidou.diagne Jan 08 '19 at 08:11
@kalidou.diagne you mean in the router-link tag ? – Salma EL HAJRAOUI Feb 24 '22 at 10:46
@SalmaELHAJRAOUI, like the example on the first comment `my link ` – kalidou.diagne Feb 24 '22 at 15:11

score 1 · Answer 2 · answered Aug 19 '21 at 14:57

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');
    },
 }

score 0 · Answer 3 · answered Dec 20 '21 at 07:48

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

score 0 · Answer 4 · answered Oct 03 '22 at 08:36

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>

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

4 Answers4