how to open external link in new tab else same window using q-btn of quasar - vue

user_13506448 0
Viewed 3183

i want to open link with new tab if external==true else open with same window using attribute :to i have tried below code but not correct to external link.
template -

 <q-btn
    size="1em"
    :color="color"
    class="q-pa-md full-width dashboard-btns"
    type="a"
    :target="external ? '_blank': ''"
    :href="external ? openUrl(to): false"
    :to="!external ? openUrl(to) :false"
    @click="$emit('click')"
 >

script - <br>
external link example 
link = {"name":"www.google.com","params":""} <br>
internal link example
link = {"name":"dashboard","params":""}

methods: {
    openUrl(link) {
      if (this.external) {
        return "///" + link.name;
      } else {
        return link;
      }
    }
  }
quasar vue.js
2 Answers

Finally i used this and work for me
Template : 

<router-link :to="to ? openUrl(to): ''"  :target="external ? '_blank': '_self'">
<q-btn
    unelevated
    nrounded
    size="1em"
    :color="color"
    class="q-pa-md full-width dashboard-btns"
    @click="$emit('click');"
  />
</router-link>

javascript :

methods: {
    openUrl(link) {
      if (this.external) {
        return "///" + link.name;
      } else {
        let links = this.$router.resolve({ 
          name: link.name,
          params: link.params ,
        });
        return links.route;
      }
    }
  }
user_135064480

It's super easy! There are 3 types of links you can add to a q-btn (or anything really, works for images, divs, you name it)...

If you want to make your app navigate...

@click="$router.replace(’/your/app/page/here’)"

If you want to open a link to a different site...

@click="window.location.href = 'https://www.example.com'"

If you want to open a link in a new tab...

@click="window.open('https://www.example.com', '_blank').focus()"

user_31963600
Related