Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

vue.js

quasar

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;
      }
    }
  }
like image 344
Shubham Sankpal Avatar asked Nov 26 '25 10:11

Shubham Sankpal


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;
      }
    }
  }
like image 85
Shubham Sankpal Avatar answered Nov 30 '25 03:11

Shubham Sankpal


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()"

like image 40
Nick Steele Avatar answered Nov 30 '25 02:11

Nick Steele



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!