[Vuejs]-Redirect user to an external website using VueJs 3

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

Leave a comment