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;
}
}
}
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;
}
}
}
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()"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With