2👍
✅
Since the paths are external urls you should add the prop is
with a
as value, then add target="_blank"
based on the presence of a
:
<li v-for="link in links" :key="link">
<link-atom :to="link.path" is="a">
{{ link.name }}
</link-atom>
</li>
in link-atom
component :
<component :is="is" :href="href" :to="to" :target="`${is==='a'?'_blank':''}`">
<slot></slot>
</component>
1👍
If you want to have links to external websites, I suggest you use anchor
tag instead of router-link
.
In your custom link-atom
you don’t pass the is
prop, and you set the default value for it as router-link
.
You only need to add is="a"
for the link-atom
custom component.
<link-atom :to="link.path" is="a">
{{ link.name }}
</link-atom>
👤Mina
Source:stackexchange.com