vue.jsquasar

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


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;
      }
    }
  }

Solution

  • 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;
          }
        }
      }